Question

我知道我会问一个问题，该问题制止一些关于使用React的核心/基本方式的规则...但是也许通过这个示例，有人可以帮助我解决我所面临的问题。

这不是我项目的完整代码，但完全显示了我的问题的想法：

https://codesandbox.io/s/change-state-from-external-component-zi79e

问题是我需要从父组件的子组件更改状态，但是我不想在父组件中运行render方法或处理父组件中的状态。

存在实现此目标的方法吗？在我的项目中，我有一个父母，该父母创建了多个通用子项，因此处理该请求会更加困难。

特别是，我需要更改一个孩子（MyFirstChild）的状态，然后另一个孩子（SecondChild）读取按键并运行API以从后端获取一些值；之后，我需要将更改发送到“ MyFirstChild”以更改其状态。父组件有〜50个子组件，我阻止了re-render方法（使用方法shouldComponentUpdate）

预期的答案是：“不可能，或者您破坏了对React的良好使用” ...

但是，也许使用forwardRef或ref或其他我看不到的东西可以帮助我解决此问题...

Answer 1

要从父级更改子组件的状态而不必运行render方法（在父级中）：一种可能的解决方案是使用Redux。借助父级的Redux，您可以调度一个Action（执行更改Redux状态的Action）。在子组件中，您会收到一部分更改的状态（可能是字符串，对象等）作为道具。因此，从父级更改后，您的子组件将再次呈现，而无需在父级中运行render方法。

https://react-redux.js.org/introduction/basic-tutorial

您也可以出于相同目的使用上下文。

但是，我看到了您的代码示例，我不确定您不希望在父级中进行渲染的确切原因，但是最简单的解决方案是发送所需的函数作为道具和标题在父级执行。

如果您要更改父项的内容，而无需再次使用Redux重新渲染，则可能是这样的：

在父级

const changeTitle = (newTitle) => {
  this.props.setTitle(newTitle);
}

return (
<div className="App">
  <ChildComponent />
</div>
);

const mapDispatchToProps = dispatch => ({
  setTitle: newTitle => dispatch(setTitleACTION(newTitle)),
});

在孩子中

return (
      <div>
        <h1>
          {this.props.title}
        </h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );

const mapStateToProps = ({ title }) => ({
  title,
});

export default connect(mapStateToProps, null)(ChildComponent);

再次使用Redux进行操作，可以从Redux商店中获取“标题”道具，在父级中，您将更改该变量（调用Redux动作）无需再次渲染父级。

如果您想从子组件中触发事件，则可以从子组件中分派操作，也可以调用一个函数（从父组件的props接收到）并在需要时调用该函数。

Answer 2

我们不能在这里使用道具来传递数据，而不是尝试从组件外部操纵状态吗？

Answer 3

基于@david苍白的解释...

如果实现此目标的唯一方法是使用Redux，我会发布我的解决方案（这是相同的示例，但是，实现Redux）...希望对其他任何人都有用。

https://codesandbox.io/s/change-state-from-external-component-redux-rmzes?file=/src/App.js

反应-更改外部组件的状态

3 个答案: