我有以下问题:我有父组件(按钮在哪里,要渲染的子组件数组)。
向每个孩子传递道具,孩子将其用作状态,然后对其进行更改。问题是孩子们不退缩。
似乎无法理解,这是更清晰的(我希望):
这是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;
因此基本上,子组件会呈现,并将其“打开”设置为false,当我再次单击按钮时我希望再次展示孩子,但什么也没发生。
儿童渲染出几秒钟后消失的东西。
看起来您的组件似乎没有以任何有意义的方式链接。单击My Class
组件上的按钮将更新something
状态,但是该状态不会传递给Child
组件。
类似地,SomeComponent
组件处理其自身的关闭,并通过Child
告诉handleClose
组件它已关闭-但这不会传递给父级,并且父级或Child
都不会传递任何打开状态到SomeComponent
。
更改Child
上的某些状态不会重新呈现其自己的孩子。为了实现这一点,必须传递一些新的东西作为支持。
键可帮助React确定哪些项目已更改,添加或为删除。键应赋予数组内的元素以给出元素具有稳定的身份。
您正在使用索引作为键。请尝试使用唯一密钥。例如。子ID或随机哈希码。
如果密钥是唯一的且是新密钥,它将重新呈现。现在,由于密钥相同,因此它不会重新渲染。