在React可复用组件中如何渲染字符串类型children并传递props？

现有代码存在的3个问题 #

• 接口属性拼写错误：属性名childred拼写错误，正确应为children，且类型限定为string过于狭窄，建议使用React.ReactNode支持所有合法React子节点
• 组件入参错误：函数式组件第一个参数是完整的props对象，直接写(children)会将整个props对象赋值给children变量，需要从props中解构出children属性
• 调用时未传入children：组件标签对中间为空，没有传入要渲染的内容

修正后的ReusableToolbar组件代码 #

import React, { FC, ReactNode } from "react";
import { ReusableToolbarWrapper, StyledText } from "./styles";
import CloseIcon from "@material-ui/icons/Close";

export interface ReusableToolbarProps {
  children: ReactNode;
}
export const ReusableToolbar: FC<ReusableToolbarProps> = ({ children }) => {
  return (
    <ReusableToolbarWrapper>
      <CloseIcon
        style={{
          width: "14px",
          height: "14px",
          marginLeft: "20px",
          marginTop: "22px",
          marginBottom: "24px",
        }}
      />
      <StyledText>{children}</StyledText>
    </ReusableToolbarWrapper>
  );
};

如果确实只允许传入文本内容，可将children的类型修改为string即可。

修正后的App组件调用代码 #

import {Toolbar} from "./toolbar";
import {ReusableToolbar} from "./ReusableToolbar/ReusableToolbar.tsx";

function App() {
  return (
      <ReusableToolbar>你要显示的工具栏文本</ReusableToolbar>
      // <Toolbar/>
    
  );
}

export default App;

把需要渲染的内容放在<ReusableToolbar>和</ReusableToolbar>标签对之间，就会作为children prop传入组件内部完成渲染。

内容的提问来源于stack exchange，提问作者marcinb1986