React JS：提取內部HTML

Question

我有一個函數返回2個按鈕包裝在span標記。我想從span中提取buttons，以便它可以利用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}