react如何引用其他组件

引用其他组件的方法

在React中引用其他组件通常涉及导入、导出和使用组件。以下是具体实现方式：

导出组件 使用export default或命名导出将组件暴露给其他文件：

// Button.js
function Button() {
  return <button>Click me</button>;
}
export default Button;

导入组件 通过import语句引入需要使用的组件：

// App.js
import Button from './Button';

function App() {
  return (
    <div>
      <Button />
    </div>
  );
}

命名导出与导入 对于多个组件的文件可以使用命名导出：

// components.js
export function Header() { /* ... */ }
export function Footer() { /* ... */ }

// 使用时
import { Header, Footer } from './components';

组件嵌套使用

可以将组件作为子组件嵌套使用：

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <Button />
    </Card>
  );
}

动态组件加载

使用lazy和Suspense实现按需加载：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}

注意事项

确保组件文件路径正确，相对路径需根据项目结构调整。对于默认导出和命名导出的使用要保持一致，避免混淆。TypeScript项目中还需注意类型导入导出的一致性。