javascript - 在react.js的JSX中转义.map()中的值

Question

我正在尝试使用 .map() 迭代对象的某些值。我需要转义一个值。我的代码如下

let modalrows = Object.keys(this.props.element).map((item,index) => (
  if(item !== 'id') {  //I am getting error in this line
    <tr key={index}>
       <td className="ui header data_type">
            {item === 'name'? 'Name':null}
       </td>
       <td>{this.props.element[item]} <span>Edit</span></td>
    </tr>
  }
));

Answer 1

您需要一个大括号来开始代码块。现在您尝试在返回表达式中使用if。用大括号固定:

let modalrows = Object.keys(this.props.element).map((item, index) => {
  if (item !== "id") {
    return (
      <tr key={index}>
        <td className="ui header data_type">
          {item === "name" ? "Name" : null}
        </td>
        <td>
          {this.props.element[item]} <span>Edit</span>
        </td>
      </tr>
    );
  }
});

或者，您可以使用filter首先过滤掉不必要的元素:

let modalrows = Object.keys(this.props.element)
  .filter(item => item !== "id")
  .map((item, index) => (
    <tr key={index}>
      <td className="ui header data_type">{item === "name" ? "Name" : null}</td>
      <td>
        {this.props.element[item]} <span>Edit</span>
      </td>
    </tr>
  ));