поместить оператор if else в возвращаемую функцию в react render

#javascript #reactjs

#javascript #reactjs

Вопрос:

Почему это не работает? Я помню, что однажды у меня получилось разделить html-часть на 2 функции, но на этот раз я хочу, чтобы код выглядел короче, но, похоже, я не могу выполнить оператор if else в моей функции возврата render сейчас.

 var App = React.createClass({
   getInitialState(){
     return {
       items:[1,2,3],
       isEdit: true
     }
   },
   renderEditForm(){
   return(
   <div>
   <input type="text" />
   <button>save</button>
   </div>
   )
   },
   renderItem(){
     return(
       this.state.items.map((item,i)=>
         <li key={i}> isEdit ? this.renderEditForm() : {item}</li>)
     )
   },
   render(){
      return(
        <ul>
          {this.renderItem()}
        </ul>
      )
   }
})
  

http://jsfiddle.net/pnvn800k/1/

Не уверен, почему это не работает

Ответ №1:

Содержимое внутри <li> должно быть заключено в flower bracket .

Обновленная скрипка:

http://jsfiddle.net/pranesh_ravi/8b0grbdd/