Senden Sie eine Requisite nur, wenn die Bedingung wahr ist in react.js

Question

Ich benutze React.js in einem Projekt und ich wollte eine Requisite nur senden, wenn eine Bedingung wahr ist, was ich nicht will ist zu senden null Werte oder leere Sachen wie das folgende Beispiel (oder this question):

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

ich die ganze Stütze senden möchten (nicht nur seinen Wert), wenn eine Bedingung erfüllt ist, so etwas wie dieses:

render: function(){ 

    ... 

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

Ich versuchte auch

... 

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

    return <SomeComponent {prop1} />; 

und natürlich so etwas wie

... 

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

In allen Fällen ich einen Unexpected token Fehler bekam, habe ich gesucht, aber ich habe nichts gefunden, gibt es eine Möglichkeit, dass in reagieren zu tun?

Danke.

Answer 1

Obwohl nicht sicher, was der Zweck ist - mit ES6 Ausbreitung Operator, können Sie es wie folgt tun:

const props = {}; 

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

<SomeComponent 
    { ...props } /> 

Answer 2

Nun, auch wenn Sie die undefinierten Werte senden, werden Sie die Chance immer zu validieren in einer der beiden Funktionen: componentWillMount für die erste Ladung oder componentWillReceiveProps nach dem ersten Laden. Außerdem können Sie immer die render Funktion validieren lassen. Aber wenn ich antworte nach dem Ansatz, den Sie versuchen.

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

Und in der gerenderten Komponente können Sie die getDefaultProps Funktion verwenden, um die Standardwerte zu setzen, wenn Sie keine prop Werte, die Ihr zweiter Fall ist nicht passiert.