javascript - 我无法从 React JS 获取 ReactDOM.render？

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