Как получить текущие значения состояния, когда значения должны пройти через множество различных компонентов? - PullRequest
Новая
       30

Как получить текущие значения состояния, когда значения должны пройти через множество различных компонентов?

0 голосов
/ 30 сентября 2019

В шаблонах моей папки / у меня есть подпапка с именем / components /. Внутри / components / есть еще две папки, / атомов / & / молекул /

Допустим, в моей папке / атомов / я бы имел: 

Greetings.jsx  <p> Hello {this.props.userName} </p>
Link.jsx: <a href="this.props.link"> Click this link to head to your profile. </a>

Внутри моей / молекул / папки: 

HelloBase.jsx <Greetings {...this.props}/> <Link {...this.props}/>

Конечно, с некоторой дополнительной логикой, кроме этого, я бы тогда вывел свойства userName & link из текущего состояния, и это выглядело бы примерно так: 

Hello Bob. Click this link to head to your profile.

Теперь предположим, что я хочу добавить еще один слой, вместо рендеринга компонента молекул в пользовательском интерфейсе, я хочу рендерить что-то под названием Hello.jsx, которое находится в папке templates / вне папки / components /. Если я правильно помню (и я только что проверил это), в моем файле Hello.jsx это выглядело бы так: 

<HelloBase />

, который не получит свойства из текущего состояния, даже если я присоединю другой {... this.props} в него.

Я попытался добавить следующее в мои / atom / files Greetings.jsx & Link.jsx 

  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      link: '',
    };
  }

, затем изменив / atom/ логика файлов от {this.props.userName} & {this.props.link} до {this.state.userName} & {this.state.link}

, затем изменение логики / молекулы / файлов с {...this.props} на {...this.state}

и добавление кшаблон / файл {...this.props}

Он по-прежнему не будет получать текущее значение из состояния.

Подводя итог, я хочу получить конкретные значения из текущего состояния из:файлы атомов в файл молекулы в файл шаблона. Файл шаблона будет отображен в пользовательском интерфейсе в конце 

template
-Hello.jsx
-components
--atoms
---Greetings.jsx
---Link.jsx
--molecules
---HelloBase.jsx

Если здесь что-то не имеет смысла, я с удовольствием объясню свою ситуацию дальше или покажу код где-нибудь более визуально привлекательным.

...