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 /＆gt;的位置现在改变了。但是<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

如果您选中了 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。请根据您的要求提供。

Answer 2

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

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

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

2 个答案: