【发布时间】：2020-05-28 11:50:50
【问题描述】：
我有以下问题： 我有父组件（按钮在哪里，以及要渲染的子组件数组）。
我向每个孩子传递道具，孩子将其用作状态，然后更改它。 问题是孩子不会重新渲染。
因为这似乎无法理解，这里有一些更清楚的（我希望）：
这里是child.js的简化版
export default function ChildComponent(props) {
const [open, setOpen] = React.useState(props.open);
const handleClick = () => {
setOpen(true);
}; /* i actually never use handleClick */
const handleClose = (event) => {
setOpen(open => !open);
};
return (
<div>
<SomeComponent hideAfterTimeMs={1000} onClose={handleClose}/>
</div>
);
}
家长：
import React from "react";
import Child from "./demo";
class MyClass extends React.Component {
constructor(props) {
super(props);
this.state = {
something: false,
};
}
displayKids = () => {
const a = [];
for (let i = 0; i < 1; i++) {
a.push(<Child open={true} key={i} message={"Abcd " + i} />);
}
return a;
};
handleChange = e => {
this.setState(prevState => ({
something: !prevState.something,
}));
};
render() {
return (
<div>
<button onClick={this.handleChange}>Nacisnij mnie</button>
{this.displayKids()}
</div>
);
}
}
export default MyClass;
所以基本上子组件渲染， 并将其“打开”设置为假， 当我再次单击按钮时 我希望再次展示孩子， 但什么也没发生。
子渲染几秒钟后消失的东西。
【问题讨论】：
-
这就是你的代码所做的，所以看起来是意料之中的。你能更具体地说明什么不起作用吗？什么按钮被点击？那么在孩子超时后自动隐藏后，应该重新打开它？
-
是的，当然。基本上我想多次渲染相同的组件（组件在特定时间后消失，这就是为什么当我单击时我希望它再次渲染）。更具体地说，我单击父组件中的按钮（那里只有一个），然后我想使用 displayKids 方法显示子组件。该按钮改变了一些状态，所以我认为这会导致重新渲染，但它不能那样工作。
-
子组件的作用是当“open”为“true”时显示某些内容（如某些文本），并在特定时间量（如1000ms）后调用handleClose并更改“open”为“假”。因此，我从父级传递变量 open={true} 并且子级将其用于初始状态（来自道具）
-
请提供一个有效的sn-p。
标签： javascript reactjs react-native