發送道具只有當react.js中的條件成立時

我在一些項目中使用React.js，並且我想只在條件爲真的情況下發送道具，我不想要的是發送null值或空的東西，如下面的示例（或this question）：發送道具只有當react.js中的條件成立時

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

我想如果條件爲真，像這樣全送道具（不僅是它的值）：

render: function(){ 

    ... 

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

我也試過

... 

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

    return <SomeComponent {prop1} />;

當然像

... 

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

在任何情況下，我得到了一個錯誤Unexpected token和，我一直在尋找，但我沒有發現任何東西，有沒有辦法做到這一點的反應呢？

謝謝。

來源

2016-07-31 Mike Woodcock

爲什麼你關心如果你傳遞一個未定義的屬性？ –

同意，什麼是實際目的？該組件仍然必須知道該道具是否通過以處理這兩種情況。到目前爲止，這似乎是一個XY問題 - 你能解釋一下用例嗎？ –

基本上我很好奇你是否可以做出反應，我認爲代碼看起來更乾淨，至少使用@OmriAharon解決方案，即使考慮到組件也必須檢查兩種情況 –

雖然不知道有什麼目的 - 與ES6傳播經營者，你可以做這樣的：

const props = {}; 

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

<SomeComponent 
    { ...props } />

來源

2016-07-31 14:37:29

你應該添加什麼@DaveNewton在評論中說（[link]（http://stackoverflow.com/questions/38685032/send-a-prop-only-if-condition-is-true-in-react-js/38685195#comment64749378_38685032））使這個答案更加有用 –

那麼即使你發送的未定義的值，你將永遠有機會驗證在以下兩個功能中的任何一箇中：componentWillMount 第一次加載或componentWillReceiveProps第一次加載後。除了您可以始終使渲染函數來驗證。但是，如果我按照您嘗試的方法回答問題。

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

而在渲染組件，您可以使用getDefaultProps功能設置的默認值，如果你沒有通過任何道具值是你的第二個案例。

來源

2016-07-31 14:54:13 ajaykumar

發送道具只有當react.js中的條件成立時

回答

相關問題