reactjs - 如何将带有 props 的组件作为 React 中的 props 传递给另一个组件

Question

passing AgentDialogBox with prop reload to AgGridReactTable component

Answer 1

是的，您可以通过多种方式将一个组件作为 props 传递给另一个组件。

第一种方式，

function Wrapper({button: Button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Button />
    </div>
  );
}

export default function App() {
  const Button = () => {
    return <button onClick={() => console.log('button clicked')}>Click</button>;
  };

  // 👇️ pass button as props to the Wrapper component
  return (
    <div>
      <Wrapper button={Button} />
    </div>
  );
}

在上面的示例中，组件作为 prop 传递给子组件。Wrapper 组件必须将 props 从 Button 重命名为 Button(首字母大写)，因为所有组件名称都必须以大写字母开头。

第二种方式，

function Wrapper({button}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {button}
    </div>
  );
}

export default function App() {
  const Button = ({text}) => {
    return (
      <button onClick={() => console.log('button clicked')}>{text}</button>
    );
  };

  return (
    <div>
      <Wrapper button={<Button text="Some button text" />} />
    </div>
  );
}

在这个例子中，我们在将 Button 组件传递给 Wrapper 组件时直接设置其 props。我们没有传递实际的组件函数，而是传递 Button 组件的返回值。这意味着我们必须将 prop 用作 {button}，而不是在我们的 Wrapper 组件中。

现在您可以使用上述两种方式中的任何一种来更改代码，我在这里使用第二种方式

const AgriReactTable = ({agentDetailsDialogBox, URL, columnDefs, reload}) => {

     return (
          <div>
              {agentDetailsDialogBox}
          </div>
     )
}


const App = () => {
      const [reload, setReload] = useState()
      const AgentDetailsDialogBox = () => { return <div>{someContent}</div>}
      
      return (
         <div>
             <AgriReactTable agentDetailsBox={<AgentDetailsBox reload={setReload} URL={apis.ADMIN_ALL_AGENT} columnDefs={columnDef} reload={reload}/>} />
         </div>
      )
}

引用-> https://bobbyhadz.com/blog/react-pass-component-as-prop#:~:text=You%20can%20pass%20a%20component,assigned%20to%20the%20children%20prop .