Question

我在android方面有相当不错的背景，但是现在我开始深入研究react native，我真的对通过挂钩和设置状态函数更改组件状态的方法感到困惑。

到目前为止，我有主屏幕，并且有许多更改可见性的小组件。这是通过让用户更改对话框中的某些过滤器设置来完成的。因此，建议的方法是在主屏幕上使用一个钩子，其中包含一个列表，其中包含每个组件的可见性值。但是，因为我从模态内部更改了组件的可见性，所以每次我想要显示模态时，我都必须传递一个不同的函数（例如setComponentEnable或setComponentDisabled）来设置每个组件的状态。因此，所有这些小功能都会污染我的主屏幕。另外，我不应该忘记提及我的模态是由许多较小的组件组成的，我将不得不深入探讨与用户操作相匹配的适当功能。所以我的问题是，有没有办法做到这一点而又不污染所有这些小功能的主体，并且每次用户在模态中更改过滤器时，主屏幕都有可能更新？

我已经阅读了有关上下文的文档，但是文档说：

上下文被设计为共享可被视为React组件树（例如当前经过身份验证的用户，主题或首选语言）的树的“全局”数据。

因此，我认为这不是上下文使用的好例子。我现在想做的是创建一个带有列表的钩子

const [isibility, setVisibility] = useState([]);

创建可见性处理程序功能

const setVisibilityEnable = () => {
   ...
}

并将其传递给我的模态。

<MyModal 
     visibilityHandler={setVisibilityEnable}/>

有没有一种方法可以在不将所有这些回调传递给模式的情况下操纵状态？也许有人可以提出更好，更干净的解决方案，以免最终拥有一个非常大的主屏幕？

Answer 1

您可以将所有设置包含在一个对象中，然后将该对象传递给所有组件。然后，每个组件都会相应地修改该对象。

const defaultVisibility = {
                            childComponentOne: true,
                            childComponentTwo: true,  
                          };
const [visibilityObject, setVisibilityObject] = useState(defaultVisibility);

将函数和对象都传递到子组件中：

<ChildComponentOne visibilityObject={visibilityObject} setVisibilityObject={setVisibilityObject} />

然后在子组件中，按如下所示设置可见性：

setVisibilityObject({...visibilityObject, childComponentOne: false});

Answer 2

为什么不只是将属性传递给模态并检查是否在oncomponentdidchange方法中进行了更改？

componentDidUpdate(prevProps) {
    if (this.props.yourPoperty!== prevProps.yourPoperty) {
       //do your visibility stuff
    }
}

或者，当您将组件连接到商店时，也可以使用redux来实现。

更改其他组件的状态（不传递setState函数）

2 个答案: