React 组件参数传递

image.png

一、父组件向子组件传值

父组件向子组件传值直接使用props进行传值，比如下面Root想要传值给Left,父组件Root里面直接引用子组件Left，并且通过组件的属性name传递给子组件，子组件在自己的内部，直接使用this.props.name来获取传递过来的值。

class Left extends React.Component {
  construct(props){
    super(props);
  }
  
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
class Root extends React.Component{
   construct(props){
    super(props);
   }

   greeting(msg){
      this.setState({
      msg
    });
  }
  
  render(){
    return (
    <div>
      <Left msg="I came From Left " />
    </div>
     )
    
  }
}

ReactDOM.render(
  <Root />,
  document.getElementById('root')
);

代码演示地址：https://codepen.io/javaor/pen/dqzRvQ

二、子组件向父组件传值

子组件向父组件与父组件给子组件传值类似，假如组件Right要传值给Root,
Root将传递一个函数greeting给子组件Right，子组件Right调用该函数，将想要传递的信息，作为参数，传递到父组件的作用域中。
函数将保障子组件Right在调用 greeting函数时，其内部 this 仍指向父组件。

class Right extends React.Component {

componentDidMount() {   
    this.props.greeting('Hello From Right')
  }
  render() {
    return <h1>I'm right</h1>;
  }
}

class Root extends React.Component{

  state = {
    msg: ''
  };

   greeting(msg){
      this.setState({
      msg
    });
  }
  
  render(){
    return (
    <div>
      <p>Msg From Right: {this.state.msg}</p>
      <Right greeting={msg => this.greeting(msg)} />
    </div>
     )
  }
}

ReactDOM.render(
  <Root />,
  document.getElementById('root')
);

代码演示地址：https://codepen.io/javaor/pen/WgEOdG?editors=1011

三、兄弟节点之间的传值

假设Right想要向Left传递参数，因为他们之间没有之间关联的节点，只有一个公共的父组件Root，所以只能通过Right先向Root传值，然后在通过props从Root向Left传值。基本第二个基本上一致，代码如下：

class Left extends React.Component {

  render() {
    return <h1>Hello, {this.props.msg}</h1>;
  }
}

class Right extends React.Component {

componentDidMount() {   
    this.props.greeting('Hello From Right')
  }
  render() {
    return <h1>I'm right</h1>;
  }
}

class Root extends React.Component{

  state = {
    msg: ''
  };

   greeting(msg){
      this.setState({
      msg
    });
  }
  
  render(){
    return (
    <div>
      <Right greeting={msg => this.greeting(msg)} />
      <Left msg={this.state.msg}  />
    </div>
     )
  }
}

ReactDOM.render(
  <Root />,
  document.getElementById('root')
);