Question

我想分发一个可由开发人员动态操作的组件，例如：

能够在其元素之一/之前插入元素
能够删除其元素
能够用元素替换元素

我的一位同事建议我采用以下方法：

<Book>
  {builder => builder
    // Assume that the keys are initially defined inside of the component
    .appendAfter('title', <h2>Foobar</h2>) 
    .appendBefore(...)
    .replace('foo', <Bar />)
  }
</Book>

我不确定这是否是一个好方法，因为

该组件不具有自我描述性。
该组件违反了React的主体，我们不应该直接操作DOM。（虽然它是虚拟DOM）

您将如何实现此组件？

编辑：我想避免定义道具接收像afterSomethingComponent，beforeSomethingComponent这样的组件，因为里面有很多组件。

Answer 1

您可以尝试使用React.Fragment（React v16.2.0 +）

import React from 'react'
class Book extends React.Component {
  render() {
    return (
      <React.Fragment>
        {this.props.before}
        {this.props.children}
        {this.props.after}
      </React.Fragment>
    )
  }
}

用法：

<Book before={<h2>before element</h2>} after={<h2>after element</h2>}>
  <h1>ELEMENT</h1>
</Book>

遵循React的原则，用户可以在道具之前，之后传递子项来控制它们呈现的内容

并且通过使用React.Fragment，它可以渲染多个元素而不将它们包装在

中

如何在React中动态操作组件？

1 个答案: