Способы создания многоразового заголовка с реагированием

Question

Я новичок в реакции и ищу лучший способ создания многоразового заголовка. Цель состоит в том, чтобы повторно использовать компонент заголовка в нескольких приложениях, передавая некоторые свойства, такие как:
- Основной заголовок
- Lo go
- Строка Список меню и путей маршрутизации для отображения нескольких кнопок меню для навигация
- И логическое значение для последней кнопки меню для администрирования

Наконец, подпись для примера компонента будет выглядеть примерно так:
<Header title="title" menus_json=[{'title':'tab1', 'route_path'='/tab1'},...] logo_path=[] admin=False />

Как мы можем этого добиться ? Любое предложение, документация для этого?

Answer 1

Вы можете создать Заголовок компонент и динамически передавать его каждому компоненту, где это необходимо для значений.

Заголовок. js

function Header({title,menus_json,logo_path,admin}){
return (
   <header>
    // use your title,menus_json,logo_path,admin
   </header>
 )
}

Используйте это так в необходимые компоненты - пример

Component1. js

function Component1(){
    return (
       <div>
        <Header title="title" logo_path=[] admin=False
         menus_json=[{'title':'tab1', 'route_path'='/tab1'}] />
        <div>...</div>
       </div>
      )
    }

Component2. js с различными значениями title, menus_json ... et c.

function Component2(){
        return (
           <div>
            <Header title="title2" logo_path=[] admin=False
             menus_json=[{'title':'tab2', 'route_path'='/tab2'}] />
            <div>...</div>
           </div>
          )
        }