ReactJs如何在组件之间传递数据

Question

我一直在学习反应，并且正在逐渐加深对如何在组件之间传递数据的理解。 简单来说，似乎有4种情况：

1. 在给孩子的父级传递数据中=>使用道具
2. 在父级中从子级中检索数据=>使用ref并向下传递一个函数
3. 在子代中将数据传递给父代=>向下传递一个函数
4. 在子级中从父级检索数据

这是我还没有找到任何指导的第四种情况。 您在一个孩子中，想从父母那里获取一些没有作为道具传递的数据。 那会发生吗？

Answer 1

除了context ，您还可以通过回调从父级获取数据

class Parent extends React.Component {
  render() {
    return <Child update={Math.random} />
  }
}

class Child extends React.Component {
  state = { }

  componentDidMount() {
    this.updateState()
  }

  updateState = () => {
    const { update } = this.props
    this.setState({ something: update() }, () => {
      setTimeout(this.updateState, 1000)
    })
  }

  render() {
    return <div>{this.state.something}</div>
  }
}

这样做的一个缺点是，子级必须显式地从父级请求数据（在父级中更改数据不会像在上下文中那样更新子级）。

另一种方法是使用像redux这样的全局商店。

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child />
        <button onClick={ () => this.props.setSomething(Math.random()) }>click me</button>
      </div>
    )
  }
}

// where setSomething is an action creator that changes `globalState.something`
connect(function (state) {
  return { something: state.something }
}, { setSomething })(Child)

class Child extends React.Component {
  render() {
    return <div>{ this.props.something }</div>
  }
}

connect(function (state) {
  return { something: state.something }
})(Child)

Answer 2

第一种情况和第四种情况大致相同，除了子组件从父级提取数据而不是从父级推送数据的情况。 我无法考虑在哪种情况下它会有用。 这似乎是极不可能的情况。 即使我们想要实现它，一种方法是使用函数来附加一个钩子。