码迷,mamicode.com
首页 > 其他好文 > 详细

react-组件间的传值

时间:2019-12-19 21:06:12      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:usr   BMI   使用   数据传递   mat   div   通过   react   sub   

父组件向子组件传值

父组件通过属性进行传递,子组件通过props获取

//父组件
class CommentList extends Component{
   render(){
return(
<div>
<Comment comment = {information} />
</div>
)
}
}

//子组件
class Comment extends Component{
render(){
return(
<div>
<p>{this.props.comment}</p>
</div>
)
}
}

父组件CommentList 引用子组件Comment时设置comment属性传递information,

再组件comment中通过this.props.comment获取到information的值

子组件向父组件传值

通过回调进行传递数据

//父组件
class CommentApp extends Component{
  constructor(props){
    super();
     this.state={
     comment:[]
    }
}
  printContent(comment){
     this.setState({comment});
  }
  render(){
      return(
      <div>
         <CommentInput onSubmit = {this.printContent.bind(this)} />
      </div>
      )
 }
}

//子组件

class CommentInput extends Component{
    constructor(){
        super();
        this.state = {
            usrName:‘‘,
            content:‘‘
        };
    }
    submit(){
        if(this.props.onSubmit){
            var {usrName,content} = this.state;
            this.props.onSubmit({usrName,content})
        }
        this.setState({content:‘‘});
    }
    render(){
        return(
              <div>
               <div>
                   <span>用户名:</span>
                   <div className="usrName">
                       <input type="text" value={this.state.usrName} />
                  </div>
               </div>
                <div>
                    <span>评论内容:</span>
                    <div className="content">
                       <textarea value={this.state.content} />
                   </div>
                </div>
                <button onClick={this.submit.bind(this)}>submit</button>
            </div>
        )
    }
}
在父组件CommentApp中调用CommentInput通过属性onSubmit传入函数printContent,在子组件CommentInput中通过this.props.onsubmit调用函数通过参数形式进行值的传递
兄弟组件之间的传值
通过相同的父组件进行传递数据
子组件A通过回调函数形式将数据传给父组件,接着父组件通过属性将数据传递给子组件B

通过发布/订阅进行传递

在子组件A中 commentDidMount函数中,发布事件,在子组件B中commentDidMount函数中对事件进行监听

使用context进行传递

使用redux对state进行统一管理

react-组件间的传值

标签:usr   BMI   使用   数据传递   mat   div   通过   react   sub   

原文地址:https://www.cnblogs.com/pan-pan309/p/12069961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!