無法理解一些代碼形式

我正在使用一些來自redux-form文檔的示例代碼，並且我有一些代碼在renderField函數中不能理解。無法理解一些代碼形式

const renderField = ({ input, label, type, meta: { touched, error } }) => { 
    return (
    <div> 
     <label>{label}</label> 
     <div> 
     <input className="form-control" {...input} type={type}/> 
     {touched && error && <span>{error}</span>} 
     </div> 
    </div> 
)

如果碰到我不明白下面

{touched && error && <span>{error}</span>}

代碼是真的......什麼？我知道結果，但不知道過程...

來源

2017-02-28 Nyeon Kim

如果觸摸並且存在錯誤，請評估爲' {error}'。基本上顯示包含錯誤的跨度，如果觸摸和錯誤存在。 – Li357

這與React無關，它是javascript評估表達式的方式。

這裏是relevant docs

expr1 && expr2

返回expr1的，如果它可以被轉換爲假;否則，返回 expr2。因此，當與布爾值一起使用時，如果兩個操作數均爲true，則& &返回true;否則，返回false。

由於表達式不是布爾值，並且不能被轉換爲false（如null或undefined），它會返回的最後一個值，在此情況下與該錯誤的span在它

而正如Mayank回答所提到的，JSX只允許表達式。 if被視爲語句，而不是表達式，因此在JSX中不允許。所以你會看到使用javascript的其他功能反應開發人員回到控制。

來源

2017-02-28 07:00:51 aarosil

如果你打破使用if else和ternary操作上面的代碼，它看起來就像這樣：

1. if(touched && error) 
     <span>{error}</span> 

2. if(touched) 
     if(error) 
     <span>{error}</span> 

3. {touched && error ? <span>{error}</span> : null}

它只是意味着，如果touched and error both are true then only render this span。

注意：if不允許在JSX裏面使用，我用它來表示清晰的圖像。如果你想使用if然後從render方法調用一個函數，在裏面你可以用1和2的方法來返回span。

來源

2017-02-28 06:36:10

無法理解一些代碼形式

回答

相關問題