React JS：提取內部HTML

Question

我有一個函數，該函數返回包裹在span標記中的2個按鈕 。 我想從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}