如何在反應中將箭頭 Function 轉換為 ES5 function

Question

我有這個箭頭 function 反應：

const Welcome = ({subject, description}) => (
<div>
  <Person title={`Welcome ${subject}`}></Person>
  <Profile description={description}></Profile>
</div>
)

我想轉換為 es5 function 但我無法讓它工作：

var Welcome = function(subject,description) {
   return(
     <Person title="Welcome ".concat(subject)/>
     <Profile description=(description)/>
   );
};

我應該怎么go一下呢？ 謝謝

Answer 1

您需要執行以下步驟：

1. 用一個共同的父元素包裹 2 個相鄰的 JSX 元素。
2. 將{ }包裹在'Welcome'.concat(subject)和description周圍。
3. 解構 function 參數。

var Welcome = function({subject, description}) {
   return(
     <div>
        <Person title={ 'Welcome'.concat(subject) }/>
        <Profile description={description}/>
     </div>
   );
};

Answer 2

var Welcome = function(subject,description) {
   return(
     <div>
        <Person title={"Welcome ".concat(subject)}/>
        <Profile description={description}/>
    </div>
   );
};

試試這個兄弟

Answer 3

您忘記了參數中的解構，也忘記了將 html 內容包裝在一個父標簽下

var Welcome = function({subject,description}) {
   return(
     <div>
        <Person title="Welcome ".concat(subject)/>
        <Profile description=(description)/>
    </div>
   );
};