статический внутри React компонента - PullRequest
Новая
       37

статический внутри React компонента

1 голос
/ 01 ноября 2019

Может кто-нибудь сказать мне, что происходит в строке номер 9 в файле Wizard.js здесь: https://final -form.org / docs / Reaction-final-form / examples / wizard ? Как разворачивание работает и тому подобное?

Я понимаю концепцию детей в React, я думаю, но не таким образом. Если я поменяю <Wizard.Page> внутри index.js на <div> и уберу строку 9 в Wizard.js, код все равно будет работать, но не будет, если я просто уберу строку 9 в Wizard.js.

1 Ответ

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

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

Он определен как статическое свойство в классе Wizard, так что он доступен черезWizard.Page.

Код в Wizard.js на самом деле не основывается на том факте, что дочерние элементы компонента Wizard являются фактическими Wizard.Page компонентами - он просто предполагает, что дочерние элементы - это разные шаги вмастер: 

render() {
    const { children } = this.props
    const { page, values } = this.state
    const activePage = React.Children.toArray(children)[page]
    ...
}

Вот почему он все еще работает, когда вы используете <div> вместо <Wizard.Page>: элементы div также действуют как обертки вокруг своих дочерних элементов, а код в render()метод все равно будет работать как задумано.

Но подход <Wizard.Page> имеет несколько преимуществ:

  • Это делает код в index.js более читабельным и явным
  • При необходимости компонент Wizard.Page может превратиться в более сложный компонент с дополнительной логикой, не требуя каких-либо изменений в index.js
...