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

现在，span 也被渲染，所以按钮没有应用按钮组样式。

Answer 1

不要创建函数changesButtons()。将{changesButtons()} 替换为：

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