react父子组件之间的传值以及访问真实的dom元素

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来进行状态管理