最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Send a prop only if condition is true in react.js - Stack Overflow

programmeradmin2浏览0评论

I am using React.js in some project and I wanted to send a prop only if a condition is true, what I don't want is to send null values or empty stuff as the following example (or this question):

return (
    <SomeComponent
        prop1={foo === true ? "value" : null}
    />
);

I want to send the whole prop (not only its value) if a condition is true, something like this:

render: function(){

    ...

    return (
        <SomeComponent
           {if(foo === true) prop1="value"}
        />
    );
}

I also tried

    ...

    var prop1;
    if(foo === true) prop1 = "prop1='value'";

    return <SomeComponent {prop1} />;

and of course something like

    ...

    return (
        </SomeComponent
            {foo === true ? prop1="value" : ""}
        />
    );

In all cases I got a Unexpected token error, I have been searching but I haven't found anything, is there any way to do that in react?

Thanks.

I am using React.js in some project and I wanted to send a prop only if a condition is true, what I don't want is to send null values or empty stuff as the following example (or this question):

return (
    <SomeComponent
        prop1={foo === true ? "value" : null}
    />
);

I want to send the whole prop (not only its value) if a condition is true, something like this:

render: function(){

    ...

    return (
        <SomeComponent
           {if(foo === true) prop1="value"}
        />
    );
}

I also tried

    ...

    var prop1;
    if(foo === true) prop1 = "prop1='value'";

    return <SomeComponent {prop1} />;

and of course something like

    ...

    return (
        </SomeComponent
            {foo === true ? prop1="value" : ""}
        />
    );

In all cases I got a Unexpected token error, I have been searching but I haven't found anything, is there any way to do that in react?

Thanks.

Share Improve this question asked Jul 31, 2016 at 14:34 Mike WMike W 1,4031 gold badge22 silver badges33 bronze badges 3
  • 1 Why do you care if you pass a property with undefined value? – Omri Aharon Commented Jul 31, 2016 at 14:35
  • Agreed, what's the actual purpose? The ponent will still have to know if the prop was passed in order to handle both cases. So far this seems like an XY problem-can you explain the use case? – Dave Newton Commented Jul 31, 2016 at 14:40
  • Basically I was curious if you can do that in react and I thought the code would look cleaner that way, at least using @OmriAharon solution, even having in mind that the ponent will have to check for both cases anyway – Mike W Commented Jul 31, 2016 at 15:27
Add a ment  | 

2 Answers 2

Reset to default 6

Though not sure what's the purpose - with ES6 spread operator, you can do it like this:

const props = {};

if (foo === true) { // or just if (foo) {
   props.prop1 = 'value';
}

<SomeComponent
   { ...props } />

Well even if you send the undefined values, you will always have the chance to validate in either of the two functions: ponentWillMount for the first load or ponentWillReceiveProps after first load. Besides you can always have the render function to validate. But if I answer as per the approach you are trying.

render : function(){
if(foo === true)
    return <SomeComponent prop1 ="value1" />;
else
     return <SomeComponent />;
}

And in the rendered ponent you can use the getDefaultProps function to set the default values if you doesn't pass any prop values which is your second case.

发布评论

评论列表(0)

  1. 暂无评论