創建元素內呈現功能作出反應

Question

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

內部渲染功能=>

{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> 
)} 

我想顯示最後TD元素如果openOptionsvar值等於該行的listing_id ??

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

你可以寫如果內地圖條件如下

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'));

<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>

Answer 3

在使用任何迴路反應渲染元素，你必須使用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