Реагировать компонент-контейнер


Это мой первый проект reactJS и я пытаюсь создать страницу из моей компоненты. Я думал, что было бы лучше создать компонент раздела и затем поставить соответствующие компоненты внутри него.

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

MySection.js

        <section className={this.props.bgColor + " USBSection">
          <div className="container">
            {this.props.content}
          </div>
         </section>

Homepage.js

      <MySection
        bgColor={'bg-gray'}
        content={
          [
            <MediaObject heading={'today's rates!'} />,
            <MediaObject heading={'some other heading'} />,
            <MediaObject heading={'other other heading'} />
           ] />

      <MySection
        bgColor={'bg-gray'}
        content={
            <MediaObject heading={'today's rates!'} />,
        } />


125
1
задан 14 февраля 2018 в 08:02 Источник Поделиться
Комментарии
1 ответ

Вы не должны положить контент в качестве опоры, можно сделать так:

<section className={this.props.bgColor + " USBSection">
<div className="container">{this.props.children}</div>
</section>

и затем вы можете использовать ваш компонент, как:

 <MySection bgColor="bg-gray">
<MediaObject heading="today's rates!" />
<MediaObject heading="some other heading" />
<MediaObject heading="other other heading" />
</MySection>

<MySection bgColor="bg-gray">
<MediaObject heading="today's rates!" />
</MySection>

Поэтому все, что написано внутри "тела" компонента, передается как this.props.children.

Что касается VSCode кричать на тебя по поводу Апострофа заключается в том, что ты закрываешься от Апострофа до конца строки:

heading={'today's rates!'}

Если вы используете одинарные кавычки внутри строки, используйте двойные кавычки:

heading={"today's rates!"}

или, вы можете избежать цитата:

heading={'today\'s rates!'}

3
ответ дан 16 февраля 2018 в 08:02 Источник Поделиться