Javascript react-您可以修改this.props.children以动态（以编程方式）添加子组件吗

根据fb文档，

this.props.children

是一个不透明的数据结构，不应直接操作

事实上，文档中说我们应该在中使用库函数

看看库函数，它们都是getter，这让我相信我们不应该变异

this.props.children

这是真的吗？我们是否可以变异

这个.props.children

（例如动态插入组件等）

谢谢

您不能（或不应该）直接对

子项进行变异。但是，您可以通过映射“修改”其输出：

const Hydrogen = props => (<div>{props.weight}</div>);
const Oxygen = props => (<div>{props.weight}</div>);

const Water = props => (
    <div className='water'>
    {React.Children.map(props.children, child => (
        React.cloneElement(child, {
            weight: props.weight / React.Children.count(props.children)
        })
    ))}
    </div>
);

const WaterBalloon = props => (
    <div className='water-balloon'>
        <Water weight={3}>
            <Hydrogen />
            <Hydrogen />
            <Oxygen />
        </Water>
    </div>
);

const Hydrogen=props=>（{props.weight}）；
常数氧=props=>（{props.weight}）；
常量水=道具=>(
{React.Children.map（props.Children，child=>(
反应。克隆元素（儿童{
重量：props.weight/React.Children.count（props.Children）
})
))}
);
const waterballon=props=>(
);

在这里，我“修改”传递给水的孩子，将权重属性传递给他们

如果你需要“添加/删除”的能力，也许你应该考虑重新设计，这样你就可以维护一个“数据”数组，然后填充来自该数据的组件：

const Item=props=>(
{props.time}
);
类列表扩展了React.Component
{
构造函数（）{
超级（）；
此.state={
项目：[]
};
this.addItem=this.addItem.bind（this）；
this.removietem=this.removietem.bind（this）；
}
附加项（）{
让项目={
id:this.state.items.length+1，
时间：+新日期（）
};
这是我的国家({
items:this.state.items.concat（[item]）
});
}
removeItem（）{
这是我的国家({
items:this.state.items.concat（）.splice（1）
});
}
render（）{
返回(
添加项
删除项目

{this.state.items.map（item=>(
))}

);
}
}
谢谢！非常有用。然而，这对于能够创建一个可以动态地将组件添加到其内部的组件来说并不是一个好兆头；根据您的回答，克隆组件本身，只是为了添加新组件，似乎是一种方法，但它似乎不是一种最佳（即，高效）的方法。不过，如果只是为了用户界面（这是我们的初衷），用户每秒添加或删除组件的次数不会超过一次，这应该是可以接受的。是的，谢谢您的更新。实际上，我最终不得不使用数据数组，这似乎是一种模糊的方式，而不是使用fb的this.prop.children。使用自己的数组的原因是模糊的，因为使用数组，您现在失去了以非编程方式指定iner组件（即在jsx标记中）的语义能力。有了this.props.children，您就有了语义能力，但如果不采用猖獗的克隆，您将失去编程能力。无论如何，我认为这是React的一个缺点，目前，他们需要解决this.props.children的不可变性，也许可以通过在React.children中提供突变子
const Item = props => (
    <li>{props.time}</li>
);

class List extends React.Component
{
    constructor() {
        super();
        this.state = {
            items: []
        };

        this.addItem = this.addItem.bind(this);
        this.removeItem = this.removeItem.bind(this);
    }

    addItem() {
        let item = {
            id: this.state.items.length + 1,
            time: +new Date()
        };

        this.setState({
            items: this.state.items.concat([item])
        });
    }

    removeItem() {
        this.setState({
            items: this.state.items.concat().splice(1)
        });
    }

    render() {
        return (
            <div>
                <button onClick={this.addItem}>Add Item</button>
                <button onClick={this.removeItem}>Remove Item</button>
                <ul className='list'>
                {this.state.items.map(item => (
                    <Item key={item.id} time={item.time} />
                ))}
                </ul>
            </div>
        );
    }
}