如何在反应中将箭头 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>
   );
};