react中同级组件的传值方法_程序开发

react中同级组件的传值方法

创始人

2024-12-26 21:02:45

0次

react中同级组件传值的方法：首先打开相应的前端文件；然后设置共同的父组件传值；接着创建一个子组件，并将数据传递到父组件中；最后使父组件接收值，并传入另一个子组件中即可。

React同级组件传值

react中同级组件的传值方法

在React中同级组件本身是没有任何关联的，要想有联系只能通过共同的父组件传值，一个子组件将数据传递到父组件中，父组件接收值再传入另一个子组件中





Hello React!

//子组件向父组件传值，父组件接收再传递给另一个子组件 class Childone extends React.Component{ constructor(props){ super(props); this.state={color:"lightblue"} } handlecolor(){ this.props.fn("red"); //在触发方法中通过props添加一个新的fn方法，并且将颜色参数red传入父组件 this.setState({color:"red"}); } render(){ return(

我是第一个子组件改变第二个子组件颜色 //给第一个子组件绑定一个方法，点击就触发，注意要绑定this

) } } class Childtwo extends React.Component{ constructor(props){ super(props); } render(props){ return( 我是第二个子组件 //利用prop属性从外界即父组件获取参数，不能用state，state是内部使用的 ) } } class Parents extends React.Component{ constructor(props){ super(props); this.state={childtwocolor:"lightblue"}; } change(color) { this.setState({childtwocolor: color}); } render(props) { return (

{this.change(color)}}> //第一个子组件的方法fn，将参数red传入函数change中，更新父组件本身的颜色childtwocolor //第二个子组件获取父组件本身的颜色，当父组件颜色更新时，它也会随之更新

) } } ReactDOM.render( , document.getElementById('box') );

上一篇：react怎么提高首屏加载速度

下一篇：html中的空格符号是什么

react中同级组件的传值方法

相关内容

热门资讯