React JS：提取内部HTML

Question

I have a function which returns 2 buttons wrapped in a span tag. I want to extract the buttons from the span so it can take advantage of Bootstrap styles.

Here is the buttons function:

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

and here is the render function:

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

Right now, the span is rendered too so the buttons don't have the button group styles applied to them.

Answer 1

Do not create a function changesButtons() . replace {changesButtons()} by:

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