如何將動態道具傳遞給ReactJS中的子組件？

Question

我動態兩個組成部分之間的反覆，像這樣：

{this.props.firstname ? (

    <ProfileDropdown 
     firstname = "SomeFirstName" 
    /> 

) : (
    .... 
)} 

但不是"SomeFirstName"，我想通過this.props.firstname作爲firstname道具的<ProfileDropdown />組件中的值。我怎麼做？

Answer 1

Basic Rule：

我們可以通過在花括號 包裹其嵌入JSX任何JavaScript expression。

要指定內部JSX任何表情，我們需要使用{}，使用它，並把this.props.firstName內部的。

寫這樣的：

<ProfileDropdown 
    firstname = {this.props.firstname} 
/> 

檢查DOC：Embedding Expressions in JSX

更新：

檢查這個例子中，你會得到一個更好的主意：

{this.props.firstname ? (  //expression so {} 
    <ProfileDropdown    //jsx 
     firstname = {1 == 1 ?  //here {} to put expression inside JSX 
      <div> {1+1} </div> //inside div(JSX), so use {} again to put expression 1+1 
      : <div>World</div> 
     } 
    /> 
)