Question

this.state.obj= [{"listing_id":"1","listing_name":"A"},{"listing_id":"2","listing_name":"iima "},{"listing_id":"3","listing_name":"dsffgdf"}];

内部渲染功能=＆gt;

{this.state.obj.map((name,index) => 
  <tr key={index}>
    <td key={index} onClick={this.openOptions.bind(this,name.listing_id)}>{name.listing_id}</td>
    <td key={name.listing_name}>{name.listing_name}</td>
    if(name.listing_id == openOptionsvar){
      <td key={index+1} >Edit</td>
    }
  </tr>
)}

如果openOptionsvar值等于该行的listing_id，我想显示最后一个td元素吗？

Answer 1

listing_id是一个React.PropTypes.string。检查哪个propType是openOptionsvar（可能是React.PropTypes.number）。我担心它们是不同的属性，所以你必须将它们中的任何一个转换为通信的propType，并且在你的条件下使用严格的相等比较，例如（如果openOptionsvar是数字）：

 if(Number(name.listing_id) === openOptionsvar){
   <td key={index+1} >Edit</td>
 }

Answer 2

您可以在地图中写下条件，如下所示

＆＃13;

class App extends React.Component {
  constructor() {
    super();
     this.state = {
          obj: [{"listing_id":"1","listing_name":"A"},{"listing_id":"2","listing_name":"iima "},{"listing_id":"3","listing_name":"dsffgdf"}]
     }
  }
  render() {
    var openOptionsvar = 2;
    return (
      <div>
      {this.state.obj.map((name,index) => {
      if(name.listing_id == openOptionsvar) {
        return <li>{name.listing_name}</li>
      }}
      )}
     </div> 
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 3

在React中使用任何循环来渲染元素时，必须使用key属性。并尝试使用ternary operator代替for loop。三元运算符是if语句的替代，其中if和else子句都为同一个字段分配不同的值，如下所示：

render() {
        var openOptionsvar = 2;
        return (
          <div>
          {this.state.obj.length>0 && this.state.obj.map((name,index) => {
            return name.listing_id == openOptionsvar? <li key={index}>{name.listing_name}</li>:null
          }
          )}
         </div> 
        )
      }
    }

修改：使用Number(name.listing_id) === openOptionsvar代替name.listing_id == openOptionsvar

通过循环内部渲染函数创建元素

3 个答案: