在React中将功能组件从子组件传递到父组件

佩德罗·罗马诺·巴博萨

是否可以将功能组件从子组件传递到父组件?我正在尝试做一个动态模态,该模态显示在父级内部,但子级可以通过提供程序中的函数进行填充,例如:

setModal(() => (
    <div>content</div>)
)

父级收到此组件:

const [modal, setModal] = useState(false)
const [modalContent, setModalContent] = useState<FunctionComponent>()
...
<Provider value={{
    setModal: (content: FunctionComponent) => {
        setModalContent(content); // This updates the state to hold a function component and to re-render
        setModal(true); // This updates a state flag to show the overlay in which the modal is rendered
    },
}}>
...
</Provider>

模态的内容应该是动态的。我试图使用组件的状态来保存功能组件,但是我认为这是否可行或是否是一个好习惯。

罗斯·谢泼德

如果我正确理解了您的问题,那么您仍然希望将功能从父级传递给每个孩子,但每个孩子都应该能够更改父级也拥有所有权的模态组件的状态。

对于上述情况,您可以执行以下操作:

const Provider = ({ children, updateModal }) => {
  // With this, every child has the ability to call updateModal
  return React.Children(children).map(child => cloneElement(child, { updateModal }));
};

const ModalComponent = ({ open, children }) => {
  if (!open) return null;

  return (
    <dialog>
      {children}
    </dialog>
  );
};

const ParentComponent = () => {
  const [modal, setModal] = useState(false);
  const [modalContent, setModalContent] = useState(null);

  const updateModal = (content) => {
    setModalContent(content);
    setModal(true);
  };

  return (
    <>
      <Provider updateModal={updateModal}>
        {...insert children here}
      </Provider>
      <ModalComponent open={modal}>
        {modalContent}
      </ModalComponent>
    </>

  );
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在React Native中将数据从子组件传递到父组件?

React-将值从子组件传递到父组件

如何在React.JS中将数据从子组件传递到父组件?

如何在React中将Json对象数组从子类组件传递到父类组件?

如何在React.js中将数据从子组件传递到父组件

如何在反应中将状态从子组件传递到父组件

如何在Angular 4中将值从子组件传递到父组件

无法在本机响应中将状态值从子组件传递到父组件

如何在Angular4中将数据从子组件传递到父组件

在 Next.js 中将变量从子组件传递到父组件

如何将值从子功能组件传递到父类组件?

如何在 ReactJS 中将道具从子组件传递到父组件到另一个子组件?

如何将状态从子组件传递到父组件?

将事件从子组件传递到父组件Angular 5

将状态从子组件传递到父组件

如何将值从子组件传递到父组件

将数据从子组件传递到父组件

角度5:将数组从子组件传递到父组件

如何在React中将表单值从子组件传递给父组件

在 React 中将值从子组件发送到父组件

在React中将状态从子组件更新为父组件

React:将值从子组件传递给父组件

如何在React中使用钩子将数组从子组件传递到父组件

React Redux 通过函数从子组件到父组件传递参数

在React中,如何将参数从子组件传递到父组件?

React中的回调参数如何从子组件传递到父组件?

如何将值从子组件(基于函数的组件)传递到父组件(基于类的组件)

Knockoutjs:从子组件调用父组件的功能

单击父组件上的按钮时如何将数据从子组件传递到父组件