Javascript 反应-从外部组件更改状态

我知道我会问一个关于核心/基本使用方法的问题。。。但也许通过这个例子，有人可以帮助我解决我所面临的问题

这不是我项目的全部代码，但准确地显示了我问题的想法：

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

有没有办法做到这一点？在我的项目中，我有一个创建多个通用子级的父级，处理此请求将更加困难

具体来说，我需要在另一个孩子（SecondChild）读取击键并运行API从后端获取一些值之后，更改一个孩子（MyFirstChild）的状态；之后，我需要将更改发送到“我的第一个孩子”以更改他的状态。 父组件有50个子组件，我阻止了重新渲染方法（使用方法

shouldComponentUpdate

）

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

---

但是，可能使用forwardRef或ref，或者我看不到的其他东西可以帮助我解决这个问题…

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

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

从组件外部更改子组件的状态不必运行渲染方法（在父级中）的父级：一种可能的解决方案是使用Redux。使用来自父级的Redux，您可以分派操作（执行更改Redux状态的操作）。 在子组件中，您将收到更改的状态部分（可以是字符串、对象等）作为道具。因此，当它从父组件更改时，子组件将再次渲染，而无需在父组件中运行渲染方法

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

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

如果要从父级更改内容，而不使用Redux再次重新渲染，则应如下所示：

父项中的

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

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

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

constchangetTitle=（newTitle）=>{
本.props.setTitle（newTitle）；
}
返回(
);
const mapDispatchToProps=调度=>({
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);

返回(
{this.props.title}
开始编辑，看看神奇的发生！
);
常量mapStateToProps=（{title}）=>({
标题
});
导出默认连接（MapStateTops，null）（ChildComponent）；

同样，如果您使用Redux进行此操作，您可以从Redux存储中获得“title”道具，并且在父级中，您将更改该变量（调用Redux操作），而无需再次呈现父级。

---

如果要从子组件触发事件，可以从子组件分派操作，也可以调用函数（从父组件的道具接收）并在需要时调用该函数。

从父组件更改子组件的状态，而无需运行渲染方法（在父组件中）：一种可能的解决方案是使用Redux。使用来自父级的Redux，您可以分派操作（执行更改Redux状态的操作）。 在子组件中，您将收到更改的状态部分（可以是字符串、对象等）作为道具。因此，当它从父组件更改时，子组件将再次渲染，而无需在父组件中运行渲染方法

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

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

如果要从父级更改内容，而不使用Redux再次重新渲染，则应如下所示：

父项中的

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

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

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

constchangetTitle=（newTitle）=>{
本.props.setTitle（newTitle）；
}
返回(
);
const mapDispatchToProps=调度=>({
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);

返回(
{this.props.title}
开始编辑，看看神奇的发生！
);
常量mapStateToProps=（{title}）=>({
标题
});
导出默认连接（MapStateTops，null）（ChildComponent）；

同样，如果您使用Redux进行此操作，您可以从Redux存储中获得“title”道具，并且在父级中，您将更改该变量（调用Redux操作），而无需再次呈现父级。

---

如果要从子组件触发事件，可以从子组件分派操作，也可以调用函数（从父组件的道具接收）并在需要时调用该函数。

基于@david paley解释

如果实现这一点的唯一方法是使用Redux，那么我将发布我的解决方案（这是相同的示例，但是，实现Redux）。。。希望这对其他人有用

---

基于@david paley的解释

如果实现这一点的唯一方法是使用Redux，那么我将发布我的解决方案（这是相同的示例，但是，实现Redux）。。。希望这对其他人有用

---

是的，这样做完全可以。。。但该项目有一种方法可以创造约50%的收益