标签: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> ) } }
通过发布/订阅进行传递
在子组件A中 commentDidMount函数中,发布事件,在子组件B中commentDidMount函数中对事件进行监听
使用context进行传递
使用redux对state进行统一管理
标签:usr BMI 使用 数据传递 mat div 通过 react sub
原文地址:https://www.cnblogs.com/pan-pan309/p/12069961.html