Reactjs(v.15) 将兄弟组件作为子组件

Question

我有一个像下面这样的组件层次结构（来源），我的要求是，在渲染时想在某些属性上将其转换为Target，这里我假设为flag

来源：

<Parent>
   <Xyz flag={false}/>
   <One flag={true}/>
   <Two flag={true}/>
   <Three flag={true}/>
</Parent>

目标：

<Parent>
   <Xyz>
      <One />
      <Two />
      <Three />
   </Xyz>
</Parent>

我的做法：

在Parent的侧面渲染中

render() {
    const xyz = this.props.children.filter((children) => !children.props.flag);

    const kids = this.props.children.filter((children) => children.props.flag);

    const clonedXyz = React.cloneElement(xyz, [{...props}], [...kids]);
    return(
        <div>
            {clonedXyz}
        </div>
        );
}

在反应 v15.x 中抛出错误预期的类/函数但得到 undefined

Answer 1

知道了，https://codesandbox.io/s/7ww8n4my9x

应该是React.cloneElement(xyz[0], [{...props}], kids)