为什么在下面的伪代码示例中，当容器更改foo.bar时，子不重新呈现?
Container {
handleEvent() {
this.props.foo.bar = 123
},
render() {
return <Child bar={this.props.foo.bar} />
}
Child {
render() {
return <div>{this.props.bar}</div>
}
}
即使我在修改Container中的值后调用forceUpdate()， Child仍然显示旧值。
当前回答
export default function DataTable({ col, row }) {
const [datatable, setDatatable] = React.useState({});
useEffect(() => {
setDatatable({
columns: col,
rows: row,
});
/// do any thing else
}, [row]);
return (
<MDBDataTableV5
hover
entriesOptions={[5, 20, 25]}
entries={5}
pagesAmount={4}
data={datatable}
/>
);
}
这个例子使用useEffect在道具改变时改变状态。
其他回答
根据React的理念，组件不能改变它的道具。它们应该从父进程接收，并且应该是不可变的。只有父节点可以更改其子节点的道具。
关于国家和道具的解释很好
另外，阅读这篇文章为什么我不能在react.js中更新道具?
我也遇到了同样的问题。 我有一个Tooltip组件，它正在接收showTooltip道具，我正在基于if条件在父组件上更新，它正在父组件中更新，但Tooltip组件没有呈现。
const Parent = () => {
let showTooltip = false;
if(....){ showTooltip = true; }
return(
<Tooltip showTooltip={showTooltip}></Tooltip>
)
}
我犯的错误是将showTooltip声明为let。
我意识到我做错了什么，我违反了渲染工作的原则，用钩子代替它。
const [showTooltip, setShowTooltip] = React.useState<boolean>(false);
如果Child不维护任何状态，而只是呈现道具，然后从父组件调用它，那么您可能应该将它作为功能组件。除此之外，您还可以使用与功能组件(useState)的挂钩，这将导致无状态组件重新呈现。
此外，您不应该更改propas，因为它们是不可变的。维护组件的状态。
Child = ({bar}) => (bar);
你必须使用动态组件。
在这个代码片段中，我们多次渲染子组件并传递key。
如果我们动态渲染一个组件多次，那么React不会渲染该组件，直到它的键被更改。
如果我们使用setState方法更改检查。它不会反映在子组件中，直到我们改变它的键。我们必须在child的状态上保存它然后相应地将它改为渲染child。
类父扩展组件{ 状态= { 检查:真 ｝ 呈现(){ 回报( < div className =“父”> ｛ [1,2,3].map( N => <div key={N}> <孩子完成= {this.state。检查}/ > < / div > ) ｝ < / div > ）; ｝ ｝
因为如果父对象的道具改变了，子对象不会重新渲染，但是如果它的STATE改变了:)
你所展示的是: https://facebook.github.io/react/tips/communicate-between-components.html
它将通过道具将数据从父对象传递到子对象，但没有渲染逻辑。
你需要为父节点设置一些状态，然后在父节点更改状态上重新渲染子节点。 这可能会有所帮助。 https://facebook.github.io/react/tips/expose-component-functions.html
