如何在反应中将箭头 Function 转换为 ES5 function

Question

I have this arrow function in react:

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

and I would like to convert to an es5 function but I am not able to get it to work:

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

How should I go about it? Thanks

Answer 1

You need to do following steps:

1. wrap the 2 adjacent JSX elements with a common parent element.
2. wrap { } around 'Welcome'.concat(subject) and description .
3. destructure the function parameter.

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>
   );
};

try this bro

Answer 3

You forgot the destructuring in the params and also fogot to wrap the the html content under one parent tag

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