将React组件类实例传递给子组件以访问父组件的变量和方法是否安全？

Question

我正在尝试从父组件中获取数据。我知道我可以将函数或变量传递给子组件，但将this传递给子组件以访问其父函数或变量看起来更干净。

class Parent extends Component {
  state = {
    _id: 123456789
  }

  foo = (val) => {
    this.setState({_id:val})
  }

  render() {
    return(
      <Child parentInstance={this} />
    )
  }
}

class Child extends Component {
  update = (e) => {
    this.props.parentInstance.foo(e.target.value);
  }

  render() {
    return(
      <p>{this.props.parentInstance.state._id}</p>
      <input onChange={this.update} />
    )
  }
}

Answer 1

更典型的做法是将属性和回调作为prop传递，而不是实例本身。

即<Child parentId={this.state._id} onUpdate={this.foo} />

Answer 2

如果您发现自己在向下传递this (就像我在学习React时多次做的那样)，那么您会发现重新阅读Thinking in React非常有用。

在这种情况下，您应该将ID作为道具向下传递。当状态改变时，React知道它被用来计算该属性，因此将重新渲染子组件。

至于回调，最好作为一个单独的函数来处理。如果您发现自己在应用程序中传递了许多回调，那么您可能需要考虑使用更复杂的状态管理系统，而不仅仅是反应内部的state值。

class Parent extends Component {
  state = {
    _id: 123456789
  }

  foo = (val) => {
    this.setState({ _id: val })
  }

  render() {
    return(
      <Child parentId={this.state._id} onChange={this.foo} />
    )
  }
}

class Child extends Component {
  update = (e) => {
    this.props.onChange(e.target.value);
  }

  render() {
    return(
      <p>{this.props.parentId}</p>
      <input onChange={this.update} />
    )
  }
}