ReactJs - как использовать несколько дочерних элементов в компоненте

Question

Я предпочитаю это тому факту, что я ОЧЕНЬ новичок в ReactJ и, возможно, пытаюсь выработать что-то довольно простое.

У меня есть этот код с пользовательским фрагментом HTML:

Образец компонента

const Sample = ({ title, children }) => {
    return (
          <div class="panel">
              <div class="title">
                 {title}
              </div>
              <div class="body">
                 {children}
              </div>
           </div>    
     );
};

Дополнительный вопрос - какое правильное название для вышеупомянутого? Фрагмент? Он не выглядит «компонентом», он просто изучает соглашения об именах для React

Использование компонента

export default class ExampleComponent extends Component {
    render() {
        return <div class="page-body">
            <div class="row">
                <h1> Page 1 </h1>
                <Sample title={<h1>Some title!</h1>}>
                   <p>This is my sample body!</p>
                </Sample>
            </div>
        </div>
    }
}

---

ВыЯ вижу, что содержимое элемента «Sample» автоматически берется как свойство children , но чтобы установить заголовок, я должен явно установить свойство «title». В идеале я хотел бы сделать что-то похожее на следующее:

Желаемый способ использования компонента Sample *

export default class ExampleComponent extends Component {
    render() {
        return <div class="page-body">
            <div class="row">
                <h1> Page 1 </h1>
                <Sample title="Some title!">
                   <Sample.Title>
                       <h1>This is my new way to do a title</h1>
                   </Sample.Title>
                   <Sample.Body>
                       <p>This is my sample body!</p>
                   </Sample.Body>
                </Sample>
            </div>
        </div>
    }
}

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

Заранее спасибо за любые указатели!

Answer 1

Я думаю, что вы хотите, называется JSX Namespacing? В любом случае, вы можете создать экземпляр Sample, а затем добавить больше компонентов в качестве свойств Sample (просмотреть его как объект):

import React from "react"

const Sample = ({ children }) => (
  <div className="panel">
      {children}
  </div>    
)


Sample.Title = (props) => <div className="title">{props.children}</div>
Sample.Body = (props) => <div className="body">{props.children}</div>

export default Sample

Примечание: React использует className вместо class, так как мы используемJSX.

Answer 2

Костюм Children может быть полезен для вашего сценария.

import { Children } from 'react'

const Sample = ({ title, children }) => {
  let _body, _title

  Children.forEach(children, child => {
    if (child.type === SampleTitle) {
      return _title = child
    }

    if (child.type === SampleBody) {
      return _body = child
    }
  })

  if (!_title) _title = <div className='title'>{title}</div>
  if (!_body) _body = <div className='title'>{children}</div>

  return (
    <div className='panel'>
      {_title}
      {_body}
    </div>
  )
}

const SampleTitle = ({ children }) => <div className='title'>{children}</div>
const SampleBody = ({ children }) => <div className='body'>{children}</div>

Sampe.Title = SampleTitle
Sample.Body = SampleBody

Теперь вы можете использовать Sample несколькими способами:

<Sample title="my title">
  <div>my body</div>
</Sample>

<Sample title="my title">
  <Sample.Body>my body</Sample.Body>
</Sample>

<Sample title="my fallback title">
  <Sample.Title>my overriding title</Sample.Title>
  <Sample.Body>my body</Sample.Body>
</Sample>

Answer 3

В этом случае вам просто нужно извлечь соответствующие контейнеры в их собственные компоненты:

const Sample = ({children }) => (
    <div className="panel">{children}</div>    
);

const Title = ({children}) => (
    <div className="title">{children}</div>
);

const Body = ({children}) => (
    <div className="body">{children}</div>
);

Sample.Title = Title;
Sample.Body = Body;

Также обратите внимание, что правильный класс для класса css равен className.