我無法從 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>

我按照Facebook React JS 的這個教程創建了這個應用程序

好的，我創建了一個名為user的對象，我從formatName和formatCountry以及對象中存在的任何對象元素返回此對象。

在這句話中，我也嘗試調用 country：

 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>