Возвращение const с фрагментом

Question

У меня есть const requiredText с некоторым HTML.Возвращение requiredText с React.Fragment s в мою историю Storybook не приводит к выводу по причине.

Если я определю requiredText, как показано ниже, без фрагментов, это прекрасно работает:

const requiredText = (
  <div>
    <p>This isn't rendering</p>
    <p>and I'm not sure why</p>
  </div>
);

Донне думаю, что у меня есть правильный синтаксис.Как мне определить ниже ниже const?Это должна быть функция?

const requiredText = () => (
  <>
    <p>This isn't rendering</p>
    <p>the syntax must be wrong</p>
  </>
);

const BannerStory = () => {
  return <Banner header={requiredText} />;
};

class Banner extends React.Component {
  render() {
    return <SomeComponent anotherprop={this.props.header} />;
  }
}

Answer 1

В следующем блоке кода:

const BannerStory = () => {
  return <Banner header={requiredText} />;
};

Вы передаете функцию , а не сам компонент .Выполните его перед передачей потомков.

const BannerStory = () => {
  return <Banner header={requiredText()} />;
};

Если синтаксис фрагмента <> не работает для вас, проверьте настройки веб-пакета.Вместо этого вы можете попробовать React.Fragment, который работает так же, как <>.

const requiredText = (
  <React.Fragment>
    <p>This isn't rendering</p>
    <p>and I'm not sure why</p>
  </React.Fragment>
);

Answer 2

Вы не выполняете requiredText, поэтому вы передаете ссылку на функцию, а не на ее возвращаемое значение.

do:

const BannerStory = () => {
  return <Banner header={requiredText()} />;
};

, чтобы "ввести"возвращаемое значение requiredText

, поэтому, если вы сделаете

console.log( requiredText )

, вы получите:

Object {key: null, ref: null, props: Object, _owner: null, _store: Object}
key: null
ref: null
props: Object
children: Array[2] <-- contains the text in requiredText
0: Object
type: "p"
key: null
ref: null
props: Object
children: "This isn't rendering"
_owner: null
_store: Object
1: Object
_owner: null
_store: Object

, тогда как выполнение функции захватывает возвращаемое значение