在 TypeScript 中使用 React children 道具

作者：System 时间：2024年08月15日分类：所有,typescript 字数：649




import React, { PropsWithChildren } from 'react';
 
// 定义组件的属性类型
interface MyComponentProps {
  // 这里可以定义更多的属性
}
 
// 使用React.FC（FunctionComponent）简写
const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  // 使用children道具来渲染内容
  return (
    <div>
      {children}
    </div>
  );
};
 
// 使用组件并传递子元素
const App = () => {
  return (
    <MyComponent>
      <span>这是子内容</span>
    </MyComponent>
  );
};
 
export default App;

这段代码定义了一个名为MyComponent的React组件，它接受一个名为children的props，该props包含从父组件传递给MyComponent的所有子元素。在App组件中，我们使用MyComponent并在其标签之间添加子内容。这展示了如何在TypeScript中使用React的children props。

在 TypeScript 中使用 React children 道具

评论已关闭

推荐阅读