reactjs - 如何在 jsx 中使用 map() 方法在循环外连接字符串？

Question

根据下面的代码，如何在使用方法时更正将字符串附加到循环外的map()方法

当我尝试在调用方法之前和之后连接标签时，这是我的错误<table><th>Emploeye Name</th><th>Salary</th></table>方法map()

buildString(data){
  return(//start return
  <table class="table">
   <th>Emploeye Name</th><th>Salary</th>
  data.map((employeye) =>            
        
        <tr>
          <td>{employeye.employee_name}</td>
          <td>{employeye.employee_salary}</td>
        </tr>           
          )
     </table>  
); //end return  

}

对于这个错误，我收到了这条消息

./src/views/emploeyes/Employeyes.js
  Line 27:20:  'employeye' is not defined  no-undef
  Line 28:20:  'employeye' is not defined  no-undef

这是正确的方法，没有在map()方法之前连接任何东西

buildString(data){
      return(
      data.map((employeye) =>           
            <tr>
              <td>{employeye.employee_name}</td>
              <td>{employeye.employee_salary}</td>
            </tr>
              )
      );      
  }

请帮我解决这个问题并向我解释谢谢。

标签： reactjsjsx

Answer 1

根据 JSX，您必须{}在代码上使用

buildString(data){
  return(//start return
    <table className="table">
      <thead>
        <th>Emploeye Name</th>
        <th>Salary</th>
      </thead>
      <tbody>
      {
        data.map((employeye) => (
          <tr>
            <td>{employeye.employee_name}</td>
            <td>{employeye.employee_salary}</td>
          </tr>           
        ))
      }
      </tbody>
   </table>  
  ); 
}