父->子

父组件将要传递的数据放到子组件的属性上，

// 父组件
class Father extends Component {
  
  render() {
    <Son message="msg from father" />
  }
}

子组件通过props获取这个值

// 子组件
class Son extends Component {
  constructor(props) {
    super(props)
  }
  
  render() {
    <div>
        {this.props.message}
    </div>
  }
}

子->父

子组件向父组件传值使用回调函数，父组件先向子组件传递一个函数，

// 父组件
sonHandler(msg) {
  this.setState({
    message: msg
  })
}

render() {
  return <div>
    {/*<Redirect />*/}
    <h2>{this.state.message}</h2>
    <Son click={this.sonHandler.bind(this)} />
  </div>
}

然后子组件中触发这个函数，并携带参数，就可以实现将子组件中的数据传递到父组件中

callback = (msg) => {
  return () => {
    this.props.click(msg)
  }
}

render() {
  return <div>
    <button onClick={this.callback('msg from son')}>click</button>
  </div>
}

祖先->后代

祖先到后代之间的传递方式有两种：中间层逐层props和使用context对象。逐层传递在层级较深时会变得很复杂，所以我们只使用context方法。

使用方法：上级组件声明自己支持context，提供一个context对象；子级组获取context

// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');
// 父组件
class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 子组件
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// 孙子组件（类组件）
class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}
// 孙子组件（函数组件）
export default function ThemedButton() {
  return (
      <ThemeContext.Consumer>
        {theme => (
          <Button theme={theme} />
      )}
    </ThemeContext.Consumer>
  )
}

API

React.createContext

创建一个context对象，返回一个Provider，可以设置默认值，当组建没有被Provider包裹时，会使用默认值

Context.Provider

接收一个value属性，传递给消费组件，有多层Provider包裹时，最内层的组件会覆盖其他

Context.Consumer

接收context的值，传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值

Class.contextType

挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
MyClass.contextType = MyContext;
赏

前端小白