如何在 React 的可重用组件中将子项呈现为字符串

Question

我在 React-reusableToolbar 中创建了可重用组件，我想在其中呈现一些文本，即子项。如何渲染这个组件并传递 children 属性？

这是组件的样子

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

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

我应该如何在此处呈现它：？

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

function App() {
  return (
      <ReusableToolbar></ReusableToolbar>
      // <Toolbar/>
    
  );
}

export default App;

谢谢

Answer 1

children 是像这样放在标签中的道具

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

function App() {
  return (
      <ReusableToolbar>Hello world</ReusableToolbar>
      // <Toolbar/>
    
  );
}

export default App;

您也可以像这样将其作为常规道具传递

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

function App() {
  return (
      <ReusableToolbar children="Hello world" />
      // <Toolbar/>
    
  );
}

export default App;

Answer 2

首先，在 App 组件中，您应该将 (children) 替换为 ({children}) 或 (props)，然后使用 props.children

export interface ReusableToolbarProps {
  children: string;
}
export const ReusableToolbar: FC<ReusableToolbarProps> = ({children}) => {
  return (
    <ReusableToolbarWrapper>
      ...
      <StyledText>{children}</StyledText>
    </ReusableToolbarWrapper>
  );
};

然后您可以在 <ReusableToolbar> 标记内编写要显示的文本（标记 <ReusableToolbar> 内的所有内容都传递给组件 children 属性）

<ReusableToolbar>Some text to display</ReusableToolbar>

如何在 React 的可重用组件中将子项呈现为字符串

How to render children as string in React, in reusable component

components

children

reactjs