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

Question

We have a component <Book /> looks like following:

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

And I want to give it a little change into this component, such looks like:

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

Let's say new version of <Book /> is released:

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

The position of <Author /> and <Thumbnail /> is now changed. But the <CustomBook /> doesn't follow the structure of the new <Book /> since I wrote my own structure. But what I actually wanted to do in the <CustomBook /> component was just appending an element after the <Title /> component.

Subsequently, one of my coworkers have suggested me the following approach:

<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>

But I don't think it's a good approach because: 1. The component is not self-descriptive. 2. The component is against React's principals, that we should not manipulate the DOM directly. (Although it's the virtual DOM)

I could define props such like afterTitle , but there are many components inside of the <Book /> component, therefore, it's going to be hard to define all of the props. And we also should be able to remove or replace the elements.

I'm curious if there is a react-ish way to achieve this goal. Thank you in advance.

---

(Edited)

TL;DR

Is there a way to append/replace/remove some component inside of a component, by an internally existing component, no matter how component internally changes, without defining props.

(Edited #2)

I'll publish the <Book /> component on NPM. So developers can't modify it. I want to allow developers to customize the component's internal DOM tree with such API as insertAfter('title', <Subtitle />) . But not by props because I want to make it flexible.

Answer 1

If you checked the reconciliation

1. Component instances are updated and reused based on their key.

2. React uses the key to match children in the original tree with children in the subsequent tree

Please provide key to each component and siblings elements

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

Note : for example purpose I have used 1,2,3.Please provide as per your requirements.

Answer 2

If it is not necessary to have two separate components (one for <Book> and another <CustomBook> ), then you can simply pass props to Book , for example, subtitle . Then in your Book component, you can check if it has a subtitle, and if so, display the subtitle. Ie,

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