es2015中的多行任務

我剛剛開始學習React並試圖找出某些模式。有沒有辦法做這樣的事情，而無需使用功能：es2015中的多行任務

const myElement = 
<MyComponent> 
    <ChildComponent /> 
</MyComponent> 

return (
    <div> 
    {this.state.open ? myElement : otherElement} 
    </div> 
);

我知道我可以把它都分配給一條線，但是這是不可取的。對於我來說，創建一個新組件只是爲了幾行，似乎不值得，特別是如果它不會在其他地方使用。

編輯：有些人可能想知道爲什麼不使用函數？我認爲不使用函數可能會有性能優勢。也許沒有？

來源

2016-03-10 dardub

「我在想沒有使用函數可能會有性能優勢」---這個猜測是基於......什麼？ – zerkms

基於假設。 :)我希望有人也會回答。 – dardub

@zerkms - 正如你所說，這只是一個猜測。 – dardub

您可以將大括號中的表達式包裝成JSX可以轉換爲構建DOM的函數。

render() { 
    const myElement = (
    <MyComponent> 
     <ChildComponent> 
    <MyComponent> 
) 

    return (
    <div> 
     { this.state.open ? myElement : <span>Closed</span> } 
    </div> 
) 
}

這往往是值得的重組，使myElement變成適當的組件，而不是隻是一個片段。

來源

2016-03-10 21:52:07

這是一個表達式，而不是一個聲明。 – Bergi

啊謝謝。這回答了我的問題。 – dardub

es2015中的多行任務

回答

相關問題