如何从其他组件触发组件更改？答案

【问题标题】：How to fire change in component from other component?如何从其他组件触发组件更改？
【发布时间】：2019-07-20 08:28:58
【问题描述】：

我尝试在 Google MAP 中列出咖啡馆和标记的位置来制作项目。

想法是单击地点以选择咖啡馆并 - 选择适当的标记，反之亦然（点击标记 - 在列表中获得焦点适当的咖啡馆）

我有嵌套组件的层次结构，例如：

< App>:
   <List>
     <place1>
     <place2>
     ....
     <place10>
   </List>
   <Map>
    <marker of place1/>
    <marker of place2/>
   ...
   <marker of place10/>
  </Map>
</App>

我可以做一个简单的方法，只需将选择哪个咖啡馆的信息保存在顶级父级 - App 的 State 内的变量中。

但我不想渲染整个组件树——它对浏览器有很多工作。

我可以将 focused 值保留在每个子组件 placeX 和 markerX 的状态中。所以当我点击一些 placeX 切换到 focused:true 并通过父函数发送到下一个前一个组件到 focused:false - 列表。所以 - 它只有 2 个子组件要重新渲染。

但是如何在子组件中触发更改 - 在下一个分支中：？

【问题讨论】：

标签： reactjs

【解决方案1】：

但我不想渲染所有这整个组件树 - 它对浏览器有很多工作。

您只需将适当的属性传递给每个组件并使用extends React.PureComponent 来确保它不会在 props 中没有任何更改的情况下重新渲染组件。

假设您的 App State 中有 focused 属性，它等于 X，它实际上是专注的。所以你不应该将它粗略地传递给所有组件（因为它们会重新渲染每个焦点更改），但你应该计算适当的属性，即isFocused = state.focused === X。

然后它会重新渲染两个组件——一个是下一个聚焦的，一个是之前聚焦的。

编辑：

类应用

...
updateFocus(x) {
  this.updateState('focused', x)
}

render() {
  const focused = this.state.focused;
  <Map focused={focused} updateFocus={updateFocus} ... />
}

类图

...
render() {
  const {focused, updateFocus} = this.props;

  return <div>
    {this.renderMarkerItem(x, focused, updateFocus)}
  </div>
}

renderMarkerItem(x, focused, updateFocus) {
  const isFocused = focused === x;
  return <Marker x={x} focused={focused} updateFocus={updateFocus}>
}
...

React.PureComponent vs React.Component

【讨论】：

@KD 如果可以解决您的问题，请考虑将回复标记为Accepted（左侧的复选标记）。
不幸的是它不起作用。我在所有类组件中都使用了 extends React.PureComponent 而不是 extend React.Component。我制作了调用深层嵌套子组件 onClick 事件的 TopParent 类属性 isFocused 和函数 window.updateFocus(x){this.isFocused=x}。所以... TopParent 属性 isFocused 从大孩子那里获得价值，但它不会重新渲染适当的孩子。
对不起！我刚刚得到研究 - 我必须触发 forceUpdate()
@KD forceUpdate() 虽然在我添加的链接中指出这不是必需的（shallowCompare 应该在您的情况下完美工作）。我敢打赌，问题出在不同的地方。你如何将isFocused 属性传递给嵌套组件？
@KD 请检查我在答案中添加的草图。