Question

我是新手，我在React JS中创建了我的第一个应用，现在这是我的代码：

function formatName(user) {
  return user.firstName + ' ' + user.lastName;

}
function formatCountry(user) {
  
    return user.country;
  
}


//this is my objet base of the user
const user = {
  firstName: 'Simon',
  lastName: 'willians',
  country:'USA'};

const element = <h1>Hello, {formatName(user)}!</h1>;
const element2 = <h1>Country,{formatCountry(user)}!</h1>;

ReactDOM.render(element, document.getElementById('root'));
ReactDOM.render(element, document.getElementById('root'));

<div id="root"></div>

我创建了这个应用，遵循tutorial of Facebook React JS

好的，我创建了一个名称为 user 的对象，我从 formatName 和 formatCountry 返回该对象，并且该对象的元素在对象。

我也尝试用这句话打电话给国家：

const element2 = <h1>Country,{formatCountry(user)}!</h1>;

React JS的任何专家都可以告诉我我的错误在哪里或在哪里错误？

Answer 1

首先，您尝试呈现相同的元素，而不是element和element2。其次，如果渲染这样的元素，则DOM中仅渲染最后一个元素。您需要一些包装器元素，并且在该包装器中将有您的元素。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function formatCountry(user) {
    return user.country;
}

const user = {
    firstName: 'Simon',
    lastName: 'willians',
    country:'USA'};

const element2 = <h1>Country,{formatCountry(user)}!</h1>;

const element = ( 
  <div>
      <h1>Hello, {formatName(user)}!</h1>
      {element2}
  </div>
);

ReactDOM.render(element, document.getElementById('root'));

也许更优雅：

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function formatCountry(user) {

    return user.country;

}

const user = {
  firstName: 'Harper',
  lastName: 'Perez',
  country:'USA',
};

const userCountry = <h1>Country,{formatCountry(user)}!</h1>;

const userName = ( 
  <h1>Hello, {formatName(user)}!</h1>
);

const element = (
  <div>
      {userName}
      {userCountry}
  </div>
)

ReactDOM.render(element, document.getElementById('root'));

Answer 2

您必须使用Babel。您遵循的教程使用Babel在后台编译JavaScript。

1）将Babel脚本添加到您的head标签

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2）将 type =“ text / babel” 添加到编写代码的脚本标签中。

<script type="text/babel">
   function formatName(user) {
       return user.firstName + ' ' + user.lastName;
   }
   const user = {
       firstName: 'Harper',
       lastName: 'Pereez',
   };

   const element = <h1>Hello, {formatName(user)}!</h1>;
   ReactDOM.render(element,document.getElementById('root')
</script>

我无法从React JS获得ReactDOM.render吗？

2 个答案: