在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

您需要一個bracets來啟動代碼塊。 現在，您嘗試在return表達式中使用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>
  ));