将一个组件添加到另一个组件 React

Question

您好，当我在输入中输入文本并按“添加”按钮时，我正在尝试添加一个名为 ListItem 的新组件。

    var Input = React.createClass({

    addListItem: function(){
    console.log(this.refs.input.value);
    <ListItem>{this.refs.input.value}</ListItem>

    },
        render: function(){
            return (
                <div>
                  <input ref="input" type="text"/>
                  <button onClick={this.addListItem}>Add</button>
                </div>
            );
        }
    });

    var ListItem = React.createClass({

        render: function(){
            return (
                <li class="listItem">
                  {this.props.value}
                </li>
            );          
        }
    });

ReactDOM.render(<Input/>, container);

问题是组件没有被创建，当我认为道具没有通过时，我也尝试在 li 元素中添加一些文本，但这不是问题。

我在这里不明白什么？

Answer 1

维护项目状态并使用它来呈现 ListItem 的：

var Input = React.createClass({
getInitialState: function(){
    return {
        items: []
    };
},
addListItem: function(){
    var items = this.state.items;
    items.push(this.refs.input.value);
    this.setState({
      items: items
    });
},
render: function(){
    return (
        <div>
            <input ref="input" type="text"/>
            <button onClick={this.addListItem}>Add</button>
            {this.getItems()}
        </div>
    );
},
getItems: function(){
    return this.state.items.map(function (i) {
        return <ListItem>{i}</ListItem>

    });
 }
});

Answer 2

 var Input = React.createClass({
getInitialState(){
    return {
        list :[]
    }
},
addListItem: function(){
    let array = this.state.list;
     array.push({value:this.refs.input.value});
    this.setState({list: array});

},
render: function(){
    let list = this.state.list;
    console.log(list)
    let item = list&&list.map((d,i)=>{
            return (
                <ListItem key={i}>{d.value}</ListItem>
            );
        });
    return (
        <div>
            <input ref="input" type="text"/>
            <button onClick={this.addListItem}>Add</button>
            <ul>
                {item}
            </ul>
        </div>
    );
}
});

var ListItem = React.createClass({

render: function(){
    return (
        <li>
            {this.props.children}
        </li>
    );
}
});