Question

对于我来说，我有一个非常重要的问题。如何使用ReactJS实现通用组件。例如，我有一个文件上传器，它显示在我的网站的每个页面上（所以我一直在主应用程序包装器中呈现它）。但问题是，当我想要更改上传器中的一些道具（添加新信息）时，我必须经历太多组件，因为我将获得主包装器和他的功能来更改我的上传器的道具。所以当我不得不从十个或更多地方打电话给这个上传器时，这简直令人难以置信。我肯定必须有一些解决方案才能让它变得更简单。所以...任何想法？

Answer 1

如果你的代码库变得更复杂，那么这就是反应结构带来的挑战。为此，大多数人使用Redux和一些Mobx来创建商店。

商店将保留状态而不是父组件，可以从应用中的任何位置导入和更改。

我使用Mobx，它比Redux更简单，你可以在这里找到信息：https://mobx.js.org/best/store.html

使用方式如下：

import {observer} from 'mobx-react'
import store from './store'

const SomeComponent = observer(()=>
    <div>
        <button onClick={store.changeSomeState}>
            Toggle some text
        </button>
        {
            store.someState &&
                <p>some text</p>
        }
    </div>
);

观察者使它对商店中的状态变化作出反应。

通用组件使用了ReactJS

1 个答案: