组件传值
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。
这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
父传子
属性传值
- 子组件定义接受数据属性名称
- 父组件向该属性赋值
//父组件
class Father extends React.Component {
constructor() {
super();
this.state = {
属性名称:属性值
}
}
render(){
return({
<子组件 子组件属性名称={this.state.属性名称}/>
});
}
}
//子组件接受
class Son extends React.Component{
constructor(props){
super();
this.state = props;
}
render(){
return(
<子元素标签>{this.state.子组件属性名称}</子元素标签>
);
}
}
子传父
回调函数方式
//父组件
class Father extends React.Component {
constructor() {
super();
this.state = {
属性名称:属性值
}
}
// 父组件接受数据定于函数
getData = (需要传递给父组件的值)=>{
//拿到子组件传递给父组件的值
}
render(){
return({
<子组件 子组件属性名称={this.state.属性名称} 父组件接受数据函数名称={this.getData}/>
});
}
}
//子组件接受
class Son extends React.Component{
constructor(props){
super();
this.state = props;
}
handleClick(需要传递给父组件的值){
this.props.父组件接受数据函数名称(需要传递给父组件的值)
}
render(){
return(
<子元素标签 onClick={()=>{
this.handleClick(需要传递给父组件的值);
}}>{this.state.子组件属性名称}</子元素标签>
);
}
}
兄弟组件
通过子传父,然后再父传子 实现兄弟组件之间的通信