javascript - React Component wait for required props to render - Stack Overflow

admin管理员组

文章数量:1287052

I am declaring a component inside of a parent component. I want to establish specific props in one file, and then in the parent component, I want to be able to establish the other props for the child components all at once (since they are shared properties.. for the most part).

My problem is that the child component attempts to render and fails since the required prop types aren't being established at first.

Is there a way to tell the child component to wait for the required props to render?

In the ParentComponent render function, I call another function to run React.Children.map() and append props to ChildComponent.

The (rough) section where the child component is being rendered:

<ParentComponent>
    <ChildComponent
        attribute="test_attribute"
        label="Child Component"
        type="number"
        width={3}
    />
</ParentComponent>

I am declaring a component inside of a parent component. I want to establish specific props in one file, and then in the parent component, I want to be able to establish the other props for the child components all at once (since they are shared properties.. for the most part).

My problem is that the child component attempts to render and fails since the required prop types aren't being established at first.

Is there a way to tell the child component to wait for the required props to render?

In the ParentComponent render function, I call another function to run React.Children.map() and append props to ChildComponent.

The (rough) section where the child component is being rendered:

<ParentComponent>
    <ChildComponent
        attribute="test_attribute"
        label="Child Component"
        type="number"
        width={3}
    />
</ParentComponent>

• javascript
• reactjs

Share Improve this question Follow asked May 18, 2016 at 19:39 cmwallcmwall 46722 gold badges66 silver badges1515 bronze badges 1

• 1 Possible duplicate of How can i block a React component to be rendered until I fetched all informations? – azium Commented May 18, 2016 at 19:45

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 24

You can use a conditional render statement to only render the child when the props are populated:

let {foo, bar} = this.props;

<ParentComponent>
    { foo && bar ? <ChildComponent foo={foo} bar={bar} /> : null }
</ParentComponent>

Or instead of null you could render a <LoadingSpinner /> or something.

本文标签： javascriptReact Component wait for required props to renderStack Overflow