Reactjs 如何从其他组件触发组件中的更改？

我试着在谷歌地图上列出咖啡馆和标记物的位置来制作这个项目

想法是点击place来选择咖啡馆，然后-选择合适的标记，反之亦然（点击标记-在列表中选择合适的咖啡馆）

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

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

：
....
...

我可以做一个简单的方法，只需在顶级家长的应用程序的状态中保存变量中选择的咖啡馆的信息

但我不想渲染整个组件树——这对浏览器来说是一个很大的工作

我可以在每个子组件placeX和markerX的状态内保持聚焦的值。因此，当我单击一些时，placeX会切换到聚焦：true，并通过父级-列表中的函数发送到上一个组件聚焦：false。所以-只有2个子组件将重新渲染

但如何激发子组件中的更改-在下一个分支中：

但我不想渲染整个组件树——这对浏览器来说是一个很大的工作

您只需将适当的属性传递给每个组件，并使用

extends React.PureComponent

确保在道具中没有任何更改时，它不会重新渲染组件

假设您的应用程序状态中有

focused

属性，该属性等于

X

，它实际上是焦点。因此，您不应该粗略地将其传递给所有组件（因为它们将重新呈现每个焦点更改），但您应该计算适当的属性，即，

isFocused=state.focused==X

然后，它将重新渲染两个组件—下一个聚焦的组件和前一个聚焦的组件

编辑：

类应用程序

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

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

。。。
updateFocus（x）{
this.updateState（'focused'，x）
}
render（）{
const focused=this.state.focused；
}

类图

...
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}>
}
...

。。。
render（）{
const{focused，updateFocus}=this.props；
返回
{this.renderMarkerItem（x，focused，updateFocus）}
}
renderMarkerItem（x、聚焦、更新聚焦）{
常数isFocused=focused==x；
返回
}
...

---

< P>

@ KD，请考虑将响应标记为“代码>接受< /代码>（左边的检查标记），如果它修复了您的问题。不幸的是它不起作用。我在所有类组件中使用了extend React.PureComponent，而不是extend React.Component。我使TopParent类属性IsFocus和函数window.updateFocus（x）{this.IsFocus=x}调用深层嵌套子组件onClick事件。所以TopParent属性的重点是从孙子辈那里获取价值，但它不会重新渲染相应的孩子。抱歉！我刚做了研究-我必须启动forceUpdate（）@KD

forceUpdate（）

，尽管我在添加的链接中指出了这是不必要的（

shallowCompare

在您的情况下应该可以完美地工作）。我打赌这个问题在另一个地方。如何将

isFocused

属性传递给嵌套组件？@KD请检查我在答案中添加的草图。