React JS: Извлечь внутренний HTML

Question

У меня есть функция, которая возвращает 2 кнопки, обернутые в тег span. Я хочу извлечь buttons из span, чтобы он мог использовать стили Bootstrap.

Вот функция кнопки:

changesButtons: function() 
{ 
    if(! this.state.textChanged) 
    { 
     return null; 
    } 
    else 
    { 
     return (
      <span> 
       <button className="btn btn-primary">Save</button> 
       <button className="btn btn-default">Undo</button> 
      </span> 
     ); 
    } 
}, 

и здесь функция визуализации:

render: function() 
{ 
    console.log(this.changesButtons()); 
    return (
     <div className="input-group"> 
      <span className="input-group-addon"> 
       <input 
        type="checkbox" 
        name="task-done" 
        id="task-done" 
        checked={this.state.taskDone} 
        onChange={this.handleDoneChanged} 
        /> 
      </span> 
      <input type="text" 
        className="form-control" 
        name="item-name" 
        id="item-name" 
        value={this.state.itemName} 
        onChange={this.handleTextChange}/> 
      <span className="input-group-btn"> 
       {this.changesButtons()} 
       <button className="btn btn-warning" 
         type="button" 
         name="delete-item" 
         id="delete-item" 
         onClick={this.handleDeleteClicked}> 
        <i className="fa fa-trash"></i> 
       </button> 
      </span> 
     </div> 
    ); 
} 

Прямо сейчас, пролет оказывается слишком, чтобы кнопки не имеют стили кнопки группы применяется к ним.

Answer 1

Не создавайте функцию changesButtons(). заменить {changesButtons()} по:

{this.state.textChanged? 
     <span> 
      <button className="btn btn-primary">Save</button> 
      <button className="btn btn-default">Undo</button> 
     </span> 
:null}