javascript - 如何在 React 中操作组件内部？

Question

我们有一个组件 <Book />如下所示:

const Book = () => (<>
  <Title />
  <Thumbnail />
  <Author />
</>)

我想对这个组件进行一些改动，如下所示:

const CustomBook = () => (<>
  <Title />
  <h2>Hi, I am a subtitle</h2>
  <Thumbnail>
  <Author />
</>)

假设新版本<Book />已发布:

const Book = () => (<>
  <Title />
  <Author /> {/* Position is changed *}
  <Thumbnail /> {/* Position is changed *}
</>)

<Author />的位置和 <Thumbnail/> 现在改变了。但是 <CustomBook />不遵循新的 <Book /> 的结构因为我写了自己的结构。 但我实际上想在 <CustomBook /> 中做的事情组件只是在 <Title /> 之后附加一个元素组件。

随后，我的一位同事建议我采用以下方法:

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

但我认为这不是一个好方法，因为: 1.组件不是自描述的。 2.组件违背了React的原则，我们不应该直接操作DOM。 (虽然是虚拟DOM)

我可以定义像 afterTitle 这样的 Prop , 但是 <Book /> 里面有很多组件组件，因此很难定义所有的 Prop 。我们还应该能够删除或替换元素。

我很好奇是否有反应式的方式来实现这个目标。 提前谢谢你。

---

(已编辑)

长话短说

有没有一种方法可以通过内部存在的组件在组件内部附加/替换/删除某些组件，而无需定义 Prop ，无论组件内部如何变化。

(编辑#2)

我将发布 <Book /> NPM 上的组件。所以开发者不能修改它。我想允许开发人员使用 insertAfter('title', <Subtitle />) 等 API 自定义组件的内部 DOM 树。 .但不是通过 Prop ，因为我想让它变得灵活。

Answer 1

如果不需要两个单独的组件(一个用于 <Book> 另一个 <CustomBook> )，那么您可以简单地将 props 传递给 Book ，例如 subtitle .然后在你的Book组件，你可以检查它是否有字幕，如果有，显示字幕。即，

const Book = () => (<>
  <Title />
  { this.props.subtitle ? <h2>this.props.subtitle</h2> : null }
  <Thumbnail />
  <Author />
</>)