gpt4 book ai didi

javascript - React 子进程抛出 PropTypes 错误

转载 作者:行者123 更新时间:2023-12-01 02:04:09 24 4
gpt4 key购买 nike

我想知道,将组件作为子组件传递时如何处理 PropTypes 错误:

Failed prop type: The prop `value` is marked as required in `ChildComponent`, but its value is `undefined`.

渲染按预期工作,并且正确传递 value 属性。

我想发生这种情况是因为我将组件放入 App 组件的渲染函数中,而没有任何 Prop 。当 ParentComponent 映射到其子组件(即 ChildComponent)时,我仅将这些 Prop 传递给 ChildComponent

查看代码:https://codesandbox.io/embed/r70r5z3j9q

有办法避免这种情况发生吗?我应该如何构建我的组件?我不应该作为 child 传递组件吗?

已编辑:将 Prop “名称”更改为“值”。给它一个更通用的感觉。我试图简化代码中的问题。我知道我可以直接在 App 中传递 prop。用例是当父级正在进行计算并且这些计算应该传递给子级时。没有明确知道这些 child 是什么。这就是为什么我首先将它作为 child 使用。

最佳答案

您正在使用 cloneElement 并且将 prop 传递给它,而不是原始元素。要修复它,请直接传递 props:

const App = () => (
<div>
<ParentComponent>
<ChildComponent name="bob" />
</ParentComponent>
</div>
);

您可以轻松地将组件作为 Prop (而不是子组件)传递给您的ParentComponent,并仅在进行大量计算后才渲染它:

const App = () => (
<div>
<ParentComponent component={ChildrenComponent} />
</div>
);

const ParentComponent extends React.Component {
state = { heavyComputationFinished: false } // initial state

componentDidMount() {
runYourHeavyComputations
.then(() => { this.setState({ heavyComputationsFinished: true }) })
}

render() {
const { component } = this.props
const { heavyComputationsFinished, name } = this.state

// return nothing if heavy computations hasn't been finished
if (!heavyComputationsFinished) { return null }

// we're getting this component (not its rendering call) as a prop
return React.render(component, { name })
}
}

关于javascript - React 子进程抛出 PropTypes 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50252657/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com