如何将变量从一个组件导入到另一个组件?反应

Question

因此，我试图将触发器从sider中分离出来，这样我就可以在另一个组件中使用它而不会丢失绑定。

一开始，触发器在Sider内部，工作正常，但我真的需要触发器作为一个组件来分离Sider，把他放在另一个头组件中。

而且我还是个新手。谢谢

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import { Layout, Menu } from 'antd';
import {
UserOutlined,
VideoCameraOutlined,
UploadOutlined
} from '@ant-design/icons';
const { Sider } = Layout;
const AppSider = () => {
const collapsed = useState(false);
const toggleCollapsed = () => setCollapsed(!collapsed);
return (
<div>
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
</Menu>
</Sider>
</div>
);
}
export default AppSider

我的触发器：

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import { Button } from 'antd';
import {
MenuUnfoldOutlined,
MenuFoldOutlined 
} from '@ant-design/icons';
const Trigger = () => {

return(
<Button  type="primary"  onClick={toggleCollapsed}   style={{ marginBottom: 16 }}>
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
</Button>
);
}
export default Trigger;

Answer 1

将触发器组件像这样导入到sider中import Trigger from "THE-PATH-TO-TRIGGER-COMPONENT"，然后您可以在任何地方像这样使用它。

<Trigger toggleCollapsed={toggleCollapsed} collapsed={collapsed} /> 

您还应该将toggleCollapsed和collapsed作为道具发送到触发器组件，因为它需要它们