Javascript 如何将pass函数作为道具发送到子组件

我有一个父组件和一些子组件，我希望将函数从父组件发送到子组件，并在子组件中调用它

家长：

const buttons = [
    {
      key: 'driveFormulaButton',
      title: 'Drive Formula',
      icon: faGitAlt,
      type: 'primary',
      function: (message) => {
        console.log('fasf');
      },
    },
  ];

  return (
      <Child
        buttons={buttons}
      ></Child>
  );

const按钮=[
{
键：“driveFormulaButton”，
标题：“驱动公式”，
图标：faGitAlt，
类型：'primary'，
功能：（消息）=>{
console.log（'fasf'）；
},
},
];
返回(
);

子组件：

const Child = (props) => {
      return (
          <Button size="small" type={props.buttons.type} onClick={props.buttons.function('test')}> //not work after set propery
            <FontAwesomeIcon icon={props.buttons.icon} />
          </Button>
      );
    });

const Child=（道具）=>{
返回(
//设置属性后不工作
);
});

您调用函数，而不是在单击

onClick

回调时将其传递给函数，您应该映射

按钮

数组：

const Child = (props) => {
  return props.buttons.map((prop) => (
    <Button
      key={prop.key}
      size="small"
      type={prop.type}
      onClick={() => prop.function("test")}
    >
      <FontAwesomeIcon icon={prop.icon} />
    </Button>
  ));
}

const Child=（道具）=>{
返回props.buttons.map（（prop）=>(
属性函数（“测试”）}
>
));
}

您调用函数，而不是在单击

onClick

回调时将其传递给函数，您应该映射

按钮

数组：

const Child = (props) => {
  return props.buttons.map((prop) => (
    <Button
      key={prop.key}
      size="small"
      type={prop.type}
      onClick={() => prop.function("test")}
    >
      <FontAwesomeIcon icon={prop.icon} />
    </Button>
  ));
}

const Child=（道具）=>{
返回props.buttons.map（（prop）=>(
属性函数（“测试”）}
>
));
}

您的父组件需要通过子组件进行映射：

家长

function renderChildren() {
  const buttons = [];   // <--- populate this as in your OP

  return buttons.map((button) => {
    return (
      <Button size="small" type={button.type} onClick={() => button.function('test')}>
        <FontAwesomeIcon icon={button.icon} />
      </Button>
    )
  })
}

return (
  <>
    {renderChildren()}
  </>
);

函数renderChildren（）{
常量按钮=[]；//{
返回(
button.function（'test'）}>
)
})
}
返回(
{renderChildren（）}
);

您的父组件需要通过子组件进行映射：

家长

function renderChildren() {
  const buttons = [];   // <--- populate this as in your OP

  return buttons.map((button) => {
    return (
      <Button size="small" type={button.type} onClick={() => button.function('test')}>
        <FontAwesomeIcon icon={button.icon} />
      </Button>
    )
  })
}

return (
  <>
    {renderChildren()}
  </>
);

函数renderChildren（）{
常量按钮=[]；//{
返回(
button.function（'test'）}>
)
})
}
返回(
{renderChildren（）}
);

您可以将一组按钮作为道具发送给单个子组件。然后尝试访问按钮组件中该数组的单个对象。这行不通。更好地通过家长中的按钮进行映射，并将单个按钮作为道具发送：

  const buttons = [{*Button1*, *Button2*}]

  render(
    {buttons.map((button) => <Child button={button}>)}
  )

const buttons=[{*Button1*，*Button2*}]
渲染(
{buttons.map（（button）=>）}
)

然后，您可以在子组件中访问所需的按钮

---

下次您提问时，请提供更好的信息，说明您实际想做什么以及问题是什么（例如错误消息）。提出具体问题。这使得回答您的问题变得更容易。

您可以将一系列按钮作为道具发送给您的单个子组件。然后尝试访问按钮组件中该数组的单个对象。这行不通。更好地通过家长中的按钮进行映射，并将单个按钮作为道具发送：

  const buttons = [{*Button1*, *Button2*}]

  render(
    {buttons.map((button) => <Child button={button}>)}
  )

const buttons=[{*Button1*，*Button2*}]
渲染(
{buttons.map（（button）=>）}
)

然后，您可以在子组件中访问所需的按钮

---

下次您提问时，请提供更好的信息，说明您实际想做什么以及问题是什么（例如错误消息）。提出具体问题。这使得回答你更容易。

哦，这是一个数组。。。谢谢修复它，它是一个数组。。。谢谢你修好它