时间戳

首页 > 解决方案 > 在 react.js 的 JSX 中转义 .map() 中的值

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

问题描述

我正在尝试使用.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>
  }
));

标签： javascriptreactjs

解决方案

您需要一个大括号来开始一个代码块。现在您尝试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>
  ));

推荐阅读