react父子组件之间的传值以及访问真实的dom元素
react父子组件之间的传值
父组件通过props向子组件传值
父组件:
<son content="something" />
子组件在
contructor(props){
super(props)
}
通过this.props.something来调用
父组件获取子组件的值使用过回调实现的
子组件:
class Sonextends React.Component {
constructor (props) {
super(props);
}
handleClick() {
this.props.back('something')
}
render() {
return (
<div>
<button onClick={(e) => this.handleClick(e)}>把值传给父组件</button>
</div>
);
}
}
}
父组件:
class Father extends React.Component {
constructor (props) {
super(props);
this.state={
text:'something'
}
}
back1(arg) {
this.setState({
bgColor: color
})
}
render() {
return (
<div>
<Child back={(arg)=>{this.back1(arg)}}></Child>
{/* 子组件像父组件传值,设置回调 */}
</div>
);
}
}
可以使用props将值一直往下传递
获取真实的dom元素
给子组件一个ref,可以是父组件访问到子组件的真实dom元素,也可以使用这个办法一层一层地往外传递内层组件真实的dom元素
在父组件中:
<Son ref = "aa" />
//通过this.refs.aa就可以获取到子组件真实的dom元素
当然更简便的方式是使用redux或者mobx来进行状态管理