Javascript React JS道具不会在父重渲染器上传递给子组件

我知道以前有人问过这个问题，但答案似乎总是暗示着一个与这个场景无关的问题，我就是看不出来

我有一个父组件，它将属性传递给子组件的状态。根据此传递属性的值，子对象最初是否显示其视图。以下是我认为React的工作方式：

当父级（或一般组件）的状态更改时，将重新呈现该状态。当它被重新渲染时，它的所有子对象都会再次收到它们的道具（即，也会调用子对象的构造函数？）。但在本例中，它显然不是这样工作的

父组件：

类FileListTable扩展了React.Component
{
建造师（道具）
{
超级（道具）；
this.state={
showModal:错误
};
this.showSelectFolderModal=this.showSelectFolderModal.bind（this）；
}
ShowSelectFolderModel（）
{
this.setState（{showmodel:true}）；
}
render（）
{       
console.log（“使用showmodel=“+this.state.showmodel”呈现表格）；
返回(
...
);
}
}

文件操作菜单

组件子级：

类文件操作菜单扩展了React.Component
{
建造师（道具）
{
超级（道具）；
}
render（）
{
返回(
...
this.props.showselectFolderModel（）}>。。。
);
}
}

选择FolderModel

组件子级：

class SelectFolderModal扩展了React.Component
{
建造师（道具）
{
超级（道具）；
log（“从表中收到的道具”）；
console.log（this.props）；
this.state={show:this.props.show}；
}
closeModal（）
{
this.setState（{show:false}）；
//关门后做点什么
}
render（）
{
log（“显示状态为“+this.state.show”的呈现模式）；
返回(
&时代；
...
...
);
}
}

我的初始控制台输出如下：

使用showmodel=false呈现表格
从表中收到道具
{show:false}
显示状态为false的呈现模式

好吧，这是有道理的。但是，当我单击

FileActionMenu

中的按钮时，我得到以下输出：

使用showmodel=true呈现表格
显示状态为false的呈现模式

---

因此，当父对象更新时，父对象的状态不会作为道具传递给子对象！但我想这就是它的工作原理，有人能帮我解释一下吗？

不，你的想法不正确。组件的构造函数不应该在每次呈现/更新时都被调用。他们一上马就会接到电话

回到您的示例中，

selectFolderModel

应该是无状态的。实际上，家长维护应用程序的“状态”。在

render

方法中，没有任何东西阻止您使用“道具”：

在

选择foldermodal

的呈现方法中，使用

道具
而不是
状态
，因为该组件应该是无状态的

此外，此组件还需要另一个道具：

closeModal

，该父级应传入回调方法，通过设置状态来关闭模态

this.setState({ showModal: false });

---

您的代码中有一个小错误。您正在将父道具（

show

props）设置为

constructor

中的子状态，该子状态最初将起作用。然后，每次父组件更改时，子组件都会通过

shouldComponentUpdate

接收更改的组件

因此，您可以在代码中访问父道具（

show

），如下所示：

添加类似于

showSelectFolderModal

的功能，将

show

值更改为

false

然后将函数传递给子组件，并将其分配给按钮，而不是

closeModal

函数

类FileListTable扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showModal:错误
};
this.showSelectFolderModal=this.showSelectFolderModal.bind（this）；
this.hideSelectFolderModal=this.hideSelectFolderModal.bind（this）；
}
ShowSelectFolderModel（）{
this.setState（{showmodel:true}）；
}
HideSelectFolderModel（）{
this.setState（{showmodel:false}）；
}
render（）{
console.log（this.state）；
返回(
主表
);
}
}
类FileActionMenu扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
this.props.showselectFolderModel（）}
>
事件按钮
);
}
}
类SelectFolderModal扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
console.log（this.props.show）；
返回(
&时代；
...
this.props.hideselectFolderModel（）}
>
showSelectFolderModal()
{
    this.setState({ showModal: !this.state.showModal });
}