时间戳

首页 > 解决方案 > 如何在没有 Redux 的情况下从任何地方更改组件的状态？

reactjs - 如何在没有 Redux 的情况下从任何地方更改组件的状态？

问题描述

这是不好的做法吗？

  1. 从组件中导出状态变化函数
  2. 从其他文件导入。
  3. 调用函数改变状态？

通过这种方式，我们可以从任何地方更改某些组件状态。

例如...

我们想Model.js从任何地方改变状态。

模态.js 

import React from 'react';

export let toggleModal;

export default class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
    toggleModal = this.toggleModal;
  }

  toggleModal = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    const { open } = this.state;
    return <div style={{ color: 'red' }}>{open && 'Hello Modal'}</div>;
  }
}

App.js（一些顶级组件）

import React from 'react';
import Modal from './Modal';

export default () => (
    <>
        ...
        <Modal />
        ...
    </>
);

某处.js

import React from 'react';
import {toggleModal} from './Modal';

export default () => (
    <>
        <h1>Hello!</h1>
        <button onClick={() => toggleModal()}>open Modal!</button>
    </>
);

　　

但是 React 官方文档中没有参考，所以这是不好的做法吗？

React Docs 推荐什么...

  1. 只需传递函数道具即可将父状态从父状态更改为子状态
  2. 使用上下文
  3. Redux 或 Mobx

但是，这些对我来说太复杂了。

此处的示例代码
https://next.plnkr.co/edit/37nutSDTWp8GGv2r?preview

标签： reactjs

解决方案

我发现如果在特殊情况下，我的方式还可以。

特殊情况意味着类似于 customAlert 组件。

在 App 中一次只安装一个 customAlert 组件实例是可以的。

为达到这个...

1.ref用于访问和更改DOM
2.附加状态更改函数或组件window并调用window.function
3.我的案例：导出状态更改函数并从其他文件中导入。

这里是如何处理反应上下文 https://next.plnkr.co/edit/EpLm1Bq3ASiWECoE?preview

推荐阅读