如何在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这样的道具，但是<Book />组件中有很多组件，因此，很难定义所有的道具。我们也应该能够删除或替换元素。

我很好奇是否有实现这一目标的反应方式。先感谢您。

---

（编辑）的

TL; DR

有没有一种方法可以通过内部存在的组件在组件内部追加/替换/删除某些组件，无论组件内部如何更改，而无需定义道具。

（编辑＃2）

我将在NPM上发布<Book />组件。所以开发人员无法修改它。我想允许开发人员使用insertAfter('title', <Subtitle />)这样的API自定义组件的内部DOM树。但不是道具，因为我想让它变得灵活。

Answer 1

如果没有必要有两个单独的组件（一个用于<Book>和另一个<CustomBook>），那么你可以简单地将道具传递给Book，例如，subtitle。然后在你的Book组件中，你可以检查它是否有副标题，如果是，则显示副标题。也就是说，

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

Answer 2

如果你检查了reconciliation

1.组件实例根据其密钥进行更新和重用。

2. React使用密钥将原始树中的子项与后续树中的子项进行匹配

请为每个组件和兄弟元素提供密钥

const CustomBook = () => (<>
  <Title  key={1}/>
  <h2 key={2}>Hi, I am a subtitle</h2>
  <Author key={3}/> 
  <Thumbnail key={4}/>
</>)

注意：例如，我使用1,2,3。请根据您的要求提供。