Question

我一直在学习反应，并且正在放慢对如何在组件之间传递数据的理解。在简化的基础上，似乎有4种情况：

在父传递数据中传递给child =＆gt;使用道具
父级检索来自child =＆gt;的数据使用ref并传递一个函数
在子传递数据中，父亲=＆gt;传递一个功能
在子级中从父级检索数据

这是我还没有找到任何指导的第四个案例。你是一个孩子，并希望从父母那里得到一些没有作为道具传下来的数据。这会发生吗？

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

第1和第4种情况或多或少相同，除了子组件从父项中提取数据而不是父项推送的数据的情况。我无法想到它将在哪种背景下有用。这似乎是非常不可能的情况。即使我们想要实现它，一种方法是使用函数附加一个钩子。

ReactJs如何在组件

2 个答案: