React 父/子状态更改设计问题

Posted

技术标签:

【中文标题】React 父/子状态更改设计问题【英文标题】:React Parent/Child State Change Design Question 【发布时间】:2021-01-26 04:24:10 【问题描述】:

我有一个带有两个子组件的组件,其中一个是一个按钮,用于切换状态 (modalVisible),该状态决定另一个子组件(模态框)是否可见。

我在父级和模态子级之间共享开/关状态时遇到问题。我尝试将状态保留在父级中,然后将其作为道具传递给子级,但每次父级状态更改时都不会重新渲染子级。

<CommentsModal visible=modalVisible />

在 CommentsModal.js 中...

import Modal from 'react-native-modal';
...
const CommentsModal = (visible) => 
    const [modalVisible, setModalVisible] = useState(visible);
    ...
    return <Modal visible=modalVisible />

我考虑将状态完全保留在父级中,而不将其传递给 CommentsModal,如下所示:

function renderModal() 
    if (modalVisible) 
        return <CommentsModal visible=true />
     else 
        return <View />
    

但我意识到 CommentsModal 中必须有一个状态,因为我需要一个“X”按钮来关闭模式。

我不确定最好的方法是什么……我可以做 redux,但因为这些模式的数量是动态的;我不希望我的商店那么复杂。我能想到的唯一方法是将所有模式代码移动到父组件中,然后它们可以轻松共享状态,但这对我来说似乎很脏。有人有解决办法吗?

【问题讨论】:

【参考方案1】:

您在父组件中保持状态的直觉是正确的。要实现 x 按钮,您只需将 onClose 属性传递给模态框,这将是一个将 modalVisible 设置为 false 的函数。所以你最终会得到这样的结果:

// parent component
const ParentComponent = () => 
  const [modalVisible, setModalVisible] = useState(false);
  const openModal = () => setModalVisible(true);
  const closeModal = () => setModalVisible(false);

  return (
    <div>
      <CommentsModal visible=modalVisible onClose=closeModal />
      <button onClick=openModal>open the modal</button>
      <p>other children here...</p>
    </div>
  )



// CommentsModal
const CommentsModal = (props) => (
  <Modal visible=props.visible>
    <button onClick=props.onClose>X</button>
    <p>more modal content here...</p>
  </Modal>
)

【讨论】:

显然你需要将 div 替换为视图,将按钮替换为 touchableopacity 等,但这与 react 和 react native 的原理相同。 我不知道为什么我认为这行不通。我记得之前遇到过一个错误,说您无法从另一个组件中更改状态。它可能意味着别的东西。谢谢!

以上是关于React 父/子状态更改设计问题的主要内容,如果未能解决你的问题,请参考以下文章

React js从父事件中更新子状态

在 React 中通过更改父级的道具来更新子组件

在更改方法上使用输入子级反应控制父级状态

React 子组件在父组件中更新状态后如何将其重置回原始状态

React - 从另一个子组件更改子组件中的状态

在 React Native 中将状态从子组件传递到父组件