javascript - 更改与不同文件 react 的值

Question

所以我有这个 react 文件结构

app/
  |- assets/
  |   |-pages/
  |   |   |-desktop.jsx
  |   |   |-mobile.jsx
  |   |-components.jsx
  |-index.jsx

在index.jsx中，我需要desktop.jsx 在desktop.jsx中，我需要components.jsx，但components.jsx中有一部分需要更改index.jsx类中的状态。

所以它是这样的:

index.jsx -> 桌面.jsx -> 组件.jsx

那么如何使用 Components.jsx 中的函数更改 index.jsx 中类的状态

感谢您的帮助!

Answer 1

对于 React，要记住的是属性向下，事件向上。这意味着将值从父组件传递给子组件，通过 props 来完成；要将值从子级传递回父级，请使用事件。

就您而言，您有多个组件“层”，因此您必须分多个步骤来完成。例如:

<Index val="the value to pass" />

在 Index 组件 render 方法中的某个位置，您有以下行:

<Desktop val={this.props.val} />

因此，现在可以在桌面组件中访问原始值。与 Index 组件一样，Desktop 组件的 render 方法包​​括:

<Components val={this.props.val} />

要将值传递回组件链需要事件和事件处理程序。例如:

假设 Index 组件有一个方法 onValChange 来处理值的更改。然后我们像这样渲染子组件:

// in the index component, a change will call the index component
// onValChange method
<Desktop val={this.props.val} onValChange={this.onValChange} />

// in the desktop component, a change will call the props.onValChange
// method (which is the same one passed in the line above)
<Component val={this.props.val} onValChange={this.props.onValChange} />