Question

所以我有这个反应文件结构

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 -> desktop.jsx -> components.jsx

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

感谢您的帮助！

Answer 1

使用React，要记住的是支持，事件向上。这意味着将值从父组件传递给子组件，通过props执行;要将值从子项传递回父项，请使用事件。

在您的情况下，您有多个“层”组件，因此您必须分多步完成。例如：

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

在索引组件render方法的某处，您有以下行：

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

因此，现在可以在Desktop组件中访问原始值。与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} />

改变与不同文件反应的价值

1 个答案: