在组件内部对本机组件进行反应

Question

我有一个包含textInput的组件，还有一个带有滑块的组件也有textInput。由于两个textInput完全相同，我正在将带有textInput的组件导入带有滑块的组件中。当我关注textInput时，我想让滑块消失(焦点：true->隐藏滑块，焦点：false->显示滑块)由于textInput是在一个子组件上，我使用回调来获取子组件的焦点状态，并基于此更新父组件上的焦点状态。

问题是，由于我正在更新父对象的状态，所以整个事情都会被重新渲染，这也会重新渲染子对象，从而再次返回状态，从而使父对象再次渲染，并使子对象再次渲染从而使子对象返回状态，然后再次渲染父对象，依此类推。

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

我的问题是，我如何只运行一次，或者至少当focus=true时，我如何使滑块始终隐藏(我已经将所有内容合并到一个组件中，这解决了问题，但我有另一个视图，它只需要textInput，所以如果我能将其拆分为两个组件，那就太好了)

Answer 1

我认为您正试图使用componentDidUpdate这样的生命周期方法来更改父组件的状态，这会导致渲染循环。相反，使用一个函数作为道具来设置新状态，然后使用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} ... >;
}

这应该行得通。