当值必须经过许多不同的组件时，如何获取状态的当前值？

Question

在我的文件夹模板中/我有一个名为/ components /的子文件夹。 在/ components /中，还有两个文件夹/ atoms /和/ molecules /

假设我在/ atoms /文件夹中：

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

在我的/ molesules /文件夹中：

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

当然，除此以外，还有一些更多的逻辑，然后我将使属性userName和link脱离当前状态，这将呈现出类似以下内容：

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

现在，我想向其添加另一层，而不是在UI上呈现分子组件，而是要呈现位于模板/文件夹内/ components /文件夹之外的名为Hello.jsx的东西。 。 如果我没记错（我刚刚测试过），则在我的Hello.jsx文件中看起来像这样

<HelloBase />

即使我附加了另一个{... this.props}，它也不会使属性脱离当前状态。

我尝试在/ atom /文件Greetings.jsx和Link.jsx中添加以下内容

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

然后从{this.props.userName}和{this.props.link}更改/ atom /文件逻辑 到{this.state.userName}和{this.state.link}

然后将/ molecule /文件逻辑从{...this.props}更改为{...this.state}

然后将其添加到模板/文件{...this.props}

它仍然不会从状态中获取当前值。

总结一下，我想从当前状态中获取特定的值： 原子文件到分子文件再到模板文件。模板文件将最终呈现到用户界面

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

如果这里没有任何意义，我很乐意进一步解释我的情况或将代码显示在更具视觉吸引力的位置。