React.cloneElement的利用详解(2)

const ComponentButton = props => { const { addonAfter, children } = props; const button = <button key='button'>{ children }</button> const list = [button, addonAfter ? React.cloneElement(addonAfter, { key: 'button-addon' } : null) return <div>{ list } <div> }

在开拓巨大组件中，常常会按照需要给子组件添加差异的成果可能显示结果，react 元素自己是不行变的 (immutable) 工具， props.children 事实上并不是 children 自己，它只是 children 的描写符 (descriptor) ，我们不能修改任何它的任何属性，只能读到个中的内容，因此 React.cloneElement 答允我们拷贝它的元素，而且修改可能添加新的 props 从而到达我们的目标。

虽然，得益于 react 强大的组合模式，这并不只仅范围于 props.children ，不管是 props.left 照旧 props.right 可能任何其它的 props 传进来的内容，只要是正当的 react 元素，我们都可以利用这个 React.cloneElement 对其举办操纵。