Question

有一个Parent组件容器Child组件。

Parent应该加载数据（例如使用AJAX）并更新Child 输入。
Child应该听取输入的更改，并更新他们。

从Child设置{strong>输入值设置Parent 道具：

<input value={this.props.someVal}

但是这使得它无法自我更新child，因为为了自我更新输入，它必须使用：

<input value={this.state.someVal}

这是否意味着，Child必须侦听输入更改并触发Parents处理函数，以设置其props？

我认为设置组件道具 - 自动更新相应的状态（触发重新渲染）以及使用<input value={this.state.someVal}应该涵盖这两种情况。

Answer 1

道具和州之间确实没有任何联系。这是两种不同的机制：状态是组件的内部，用于保存封装的数据。正如您所做的那样，道具由封闭物体发送。

有几种方法可以解决这个问题，但普遍的共识是，将状态放在一个位置并将其传递给组件树可以减少代码和错误。这意味着您的陈述是正确的 - 您必须将更新函数从父级传递给子组件，以便在调用时它将使用新的道具重新呈现子级。

Answer 2

我找到了办法。像（TypeScript语法）一样的Smth：

componentWillReceiveProps(props: Props) {
  this.setState({
    data: props.data
  })
}

这将允许从父级和子级本身更新子级。不确定这是否是一种正确的方法，但它有点有用。

Answer 3

父组件将进行ajax调用并设置自己的状态，状态值将作为props传递，这将始终更新子进程。

 class parent extends React.Component {
  state = {
    value: null
  }
  componentWillMount() {
    this.makeApiCall()
  }
  makeApiCall = () => {
    fetch("api_ulr")
      .then(() => {
        this.setState({
          value: newValue,
        })
      })
  }
  render() {
    return ( < Child value = {
      this.state.value
    } > < /Child>)
  }

}

现在，当新数据出现时，孩子会更新。

处理子组件更新（受控制与不受控制）

3 个答案: