При перемещении содержимого JSX в отдельный файл он не отображается должным образом

Question

Допустим, у меня есть это:

// Parent component:

export default function() {
  return (
    <React.Fragment>
      <Toolbar slot="fixed" bottom>
        This will be fixed to bottom of page
        {order.name}
      </Toolbar>
    </React.Fragment>
  )
}

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

// Parent component: 

export default function() {
  return (
    <React.Fragment>
      <MyAwesomeToolbar order={order} />
    </React.Fragment>
  )
}

// MyAwesomeComponent: 

export default function(self) {
  let { order } = self.props
  return (
    <Toolbar slot="fixed" bottom>
      This will be fixed to bottom of page
      {order.name}
    </Toolbar>
  )
}

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

Я пытался создать компонент, используя класс, или просто файл рендеринга (.JSX). Оба не сработали.

Как отобразить дочерний компонент с теми же свойствами и стилями, что и в родительском компоненте?

Answer 1

Работает ли, если вы перемещаете <React.Fragment />?

// Parent component: 

export default function() {
  return (
      <MyAwesomeToolbar order={order} />
  );
}

// MyAwesomeComponent: 

export default function(self) {
  let { order } = self.props;
  return (
    <React.Fragment>
      <Toolbar slot="fixed" bottom>
        This will be fixed to bottom of page
        {order.name}
      </Toolbar>
    </React.Fragment>
  );
}