Question

我有一个包含textInput的组件和另一个带有滑块的组件，该滑块也有一个textInput。由于两个textInput完全相同，我将带有textInput的组件导入带滑块的组件中。当我专注于textInput时，我想让滑块消失（焦点：true - ＆gt;隐藏滑块，焦点：false - ＆gt;显示滑块）由于textInput位于子组件上，因此我使用回调来获取子项的焦点状态，并根据此更新获得父项的焦点状态。

问题在于，由于我更新了父母的状态，所以整个事情都被重新渲染，这也重新渲染了再次返回状态的孩子，这使得父母再次重新渲染并让孩子再次重新渲染，这使得孩子返回状态并再次重新渲染父母，等等。

我在两个组件上都做了一个console.log，似乎这种情况发生了大约5次，直到它停止。有时滑块显示即使焦点为真，滑块也会被隐藏。

我的问题是如何只运行一次这样的运行，或者至少如何在focus = true时使滑块始终隐藏（我已将所有内容合并到一个组件中并且解决了问题但是我有另一个视图只有需要textInput，所以如果我可以将它拆分为两个组件，那将会很棒）

Answer 1

我认为您正在尝试使用像componentDidUpdate这样的生命周期方法更改父组件的状态，这会导致渲染循环。相反，使用函数作为prop来设置新状态，然后使用shouldComponentUpdate方法，如下所示：

在子组件中：

func(param) {
  this.props.setParam(param)
}

在父组件中：

setParam(param) {
  this.setState(
    // set the param here
  );
}

shouldComponentUpdate(nextProps, nextState) {
  // do something with nextState
}

render() {
  // do something
  return <Child setParam={this.setParam} ... >;
}

这应该有效。

在组件内部反应本机组件

1 个答案: