javascript - Conditionally pass a prop to a Component - Stack Overflow

admin管理员组

文章数量:1426088

In my ponent I receive a prop called secondary which I deconstruct, and If that prop exist I want to pass it to another ponent, otherwise no:

...
render() {
      const { yAxis, mandatory, secondary, quantity } = this.props
...
return (
      <View>
        {secondary ? (
          <MyChart
            selectedMandatory={selectedMandatory}
            yAxis={yAxis}
            mandatory={{ ...mandatory, label: labelMandatory }}
            secondary={{ ...secondary, label: labelSecondary }}
            quantity={quantity}
          />
        ) : (
          <MyChart
            selectedMandatory
            yAxis={yAxis}
            mandatory={{ ...mandatory, label: labelMandatory }}
            quantity={quantity}
          />
        )}
       </View>
   ...

Is there another (simpler) way to do this?

In my ponent I receive a prop called secondary which I deconstruct, and If that prop exist I want to pass it to another ponent, otherwise no:

...
render() {
      const { yAxis, mandatory, secondary, quantity } = this.props
...
return (
      <View>
        {secondary ? (
          <MyChart
            selectedMandatory={selectedMandatory}
            yAxis={yAxis}
            mandatory={{ ...mandatory, label: labelMandatory }}
            secondary={{ ...secondary, label: labelSecondary }}
            quantity={quantity}
          />
        ) : (
          <MyChart
            selectedMandatory
            yAxis={yAxis}
            mandatory={{ ...mandatory, label: labelMandatory }}
            quantity={quantity}
          />
        )}
       </View>
   ...

Is there another (simpler) way to do this?

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Mar 6, 2019 at 7:34 Ana Laura T.Ana Laura T. 67022 gold badges1010 silver badges2222 bronze badges 1

• one possible way: const secondaryProp = secondary ? {{ ...secondary, label: labelSecondary }} : {};, then <MyChart {...secondaryProp} – Mayank Shukla Commented Mar 6, 2019 at 7:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could put your ternary condition inside your prop definition, if your variable is falsy, undefined will be sent, and your prop will not be accessible :

<View>
    <MyChart
        selectedMandatory={selectedMandatory}
        yAxis={yAxis}
        mandatory={{ ...mandatory, label: labelMandatory }}
        secondary={secondary ? { ...secondary, label: labelSecondary } : undefined}
        quantity={quantity}
    />
</View>

You could fix/hack it like this:

render() {

    var extraProps = {};

    if(secondary) {
        extraProps['secondary'] = { ...secondary, label: labelSecondary } 
    }

    return (
        <View>
            <MyChart
                selectedMandatory={selectedMandatory}
                yAxis={yAxis}
                mandatory={{ ...mandatory, label: labelMandatory }}
                quantity={quantity}
                {...extraProps}
            />
        </View>
    )
}

That way props.hasOwnProperty('secondary') will be false if secondary is not defined.

You could even pass in all props as a variable if that's more readable for you:

render() {
    var allProps = {
        selectedMandatory: selectedMandatory,
        yAxis: yAxis,
        mandatory: { ...mandatory, label: labelMandatory },
        quantity: quantity
    };

    if(secondary) {
        allProps['secondary'] = { ...secondary, label: labelSecondary } 
    }

    return (
        <View>
            <MyChart
                {...allProps}
            />
        </View>
    )
}

本文标签： javascriptConditionally pass a prop to a ComponentStack Overflow