생성 요소는 내부

Question

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

내부 렌더링 반응 함수 렌더링 함수 => openOptionsvar 값은 그 행의 목록 ID에 동일한 경우 나 디스플레이 최종 TD 소자 원하는

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

??

Answer 1

listing_id은 React.PropTypes.string입니다. 어떤 propType이 openOptionsvar (아마도 React.PropTypes.number)인지 확인하십시오. 당신이 (openOptionsvar가 숫자 인 경우) 예를 들어하고, 엄격한 평등 비교를 사용하는 대응하여 PropType로의 변환과 상태에 그래서 나는 그들이 서로 다른 속성입니다 두려워 :

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 속성을 사용해야합니다 . for loop 대신 ternary operator을 사용하십시오. 삼항 연산자를 대체 인 if 문하는 두 경우와 다른 절은 같은 분야에, 그래서 같은 다른 값을 할당합니다

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

편집 : name.listing_id == openOptionsvar