Как избежать дублирования обычного поведения оболочки в React с помощью Children Prop

Когда я изучал React, было несколько вещей, которые я не мог четко понять, и одна из них была детская опора. Так было до тех пор, пока я не столкнулся с проблемой, подобной следующей.

Во время работы над функцией «Подробнее» несколько компонентов, которые различаются только заголовком. Я решил создать компонент-оболочку ‹MoreDetails /›. Поскольку я должен управлять состоянием того, отображается он или нет, он должен быть компонентом класса. Таким образом, это позволяет мне передавать конкретный заголовок через опору для детей и избегать дублирования использования оболочки. Ниже вы увидите метод рендеринга компонента-оболочки:

// MoreDetails.js
...
render() {
        return (
            <div>
                <Accordion>
                    // in this place should be a title for each invoking the MoreDetails component
                    {this.props.children}
                    <button onClick={this.showContent}>
                        {this.state.showedContent ? 'Ausblenden' : 'Anzeigen'}
                    </button>
                </Accordion>
                <MoreDetailsComponent className={this.state.showedContent ? show : hide}/>
            </div>
        );
    }
}

Чтобы показать использование дочерних элементов, просто используйте полный тег ‹MoreDetails›… ‹/MoreDetails› и поместите дочерние элементы между открывающим и закрывающим тегами. Например:

// VideoDetails.js
...
return(
  <div>
      // all <p> DOM-element and all texts inside are {this.props.children} for <MoreDetails /> component
      <MoreDetails><p>Notizen</p></MoreDetails>
      <MoreDetails><p>Feedback an Dozenten</p></MoreDetails>
      <MoreDetails><p>Kommentare</p></MoreDetails>
   ...
  </div>

Поскольку цель поддержки детей для этой задачи - просто отобразить содержимое элемента ‹p›, поэтому я могу настроить заголовок так, как мне нужно, и продолжать повторно использовать ‹MoreDetails /› компонент.

Вы можете узнать больше о React.Children API и найти более подробную информацию здесь.

Спасибо за внимание! 👏

Я надеюсь, что вы найдете этот пост полезным для применения props.children в вашем проекте React.

Ура,
илонакоды