Борьба с this.props во вложенных компонентах - PullRequest
Новая
       22

Борьба с this.props во вложенных компонентах

0 голосов
/ 07 ноября 2019

Извинения, если это основной вопрос, но я новичок в реакции / Гэтсби, и я изо всех сил пытаюсь найти ответ на свой вопрос, поскольку я не уверен в точной терминологии.

В настоящее время я создаю сайтиспользуя принципы атомного дизайна. Я хочу обновить копию для компонентов Atom, таких как кнопки / формы, когда они используются на сайте - однако я изо всех сил пытаюсь передать данные, используя методы, которые я знаю.

Настройка кода

Компоненты Atom / Button текст закодирован как таковой
<button>{this.props.copy}</button>

Компонент макета, такой как баннер героя Кнопка импортируется вмакет с использованием
<section>This is a hero banner <button copy="copy goes here" /></section>

Компонент страницы Я хочу использовать компонент макета / героя на разных страницах, я импортировал компонент макета и перезаписал уже определенный текст кнопкиоднако в компоненте макета использование
<layout copy="overwrite the copy">
, очевидно, не будет работать

Существует ли способ перетаскивания компонента в другой компонент, как он вызывается, например <hero <button copy="new copy"/> />и перезаписать реквизит. ИЛИ лучший способ определить реквизиты в компонентах атома, чтобы они могли быть вложенными. таким образом, структура выглядит следующим образом (компоненты третьего уровня всегда находятся в макетах и ​​редко сами попадают на страницу.)

Page 1
Page 2
├── Layout (Hero)
├─────── атом (кнопка)
├─────── атом (вход)
└─────── атом (выбор)

любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 08 ноября 2019

У вас есть пара вариантов здесь:

  1. Prop Drilling
  2. Render Props ( React docs ).

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

Оптимизация:

Это будет включать передачу реквизитов по иерархии компонентов. ,Для вашего случая использования это будет выглядеть так: 

class Layout extends Component {
    render() {
        return (
            <section>
                This is a hero banner <AtomButton copy={this.props.copy} /> 
            </section>
        )
    }
}

class AtomButton extends Component {
    render() {
        return (
            <button>this.props.copy</button>
        )
    }
}

Реквизит рендеринга:

То, что я здесь показываю, на самом деле не является реквизитом рендеринга. Это просто передача компонента вниз в качестве реквизита, а затем перерисовывание компонента. Истинные реквизиты рендеринга определены в связанных документах React. 

class Layout extends Component {
    render() {
        return (
            <section> This is a hero banner {this.props.button} /><section>
        )
    }
}

//Wherever your are loading your Layout Component
class Page extends Component {
    render() {
        return (
            <Layout buttonRender={<AtomButton copy="overwrite copy" />} />              
        )
    }
}
...