React Parent/Child 状态改变设计问题

Question

我有一个包含两个子项的组件，其中一个是一个切换状态 (modalVisible) 的按钮，该状态决定另一个子项（模态）是否可见。

我在父项和模态子项之间共享 on/off 状态时遇到问题。我尝试将状态保留在父级中，然后将其作为 prop 传递给子级，但它并没有在每次父级状态更改时重新渲染子级。

<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，但是因为这些模态的数量是动态的；我不希望我的商店那么复杂。我能想到的唯一方法是将所有模态代码移动到父组件中，然后它们可以轻松共享状态，但这对我来说似乎很脏。有人有解决办法吗？

Answer 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>
)

React Parent/Child 状态改变设计问题

React Parent/Child State Change Design Question

javascript

parent-child

reactjs

react-native

react-native-modal