如何将“onClick”function 传递给 React 中的子组件

Question

我创建了一个非常通用的 Modal，它可以获得不同的 header、正文和页脚，但也可以为其 Reactstrap 组件获得不同的 arguments（我正在使用 Reactstrap 创建 Modal，但问题不必特定于解决 Reactstrap 问题）。

我的GenericModal.js代码如下所示：

class GenericModal extends React.Component{

    render(){
        return(
        <Reactstrap.Modal {...this.props.other} />
            <Reactstrap.ModalHeader {...this.props.headerArgs}>{this.props.header}</Reactstrap.ModalHeader>
            <Reactstrap.ModalBody {...this.props.bodyArgs}>{this.props.body}</Reactstrap.ModalBody>
            <Reactstrap.ModalFooter {...this.props.footerArgs}>{this.props.footer}</Reactstrap.ModalFooter>
        </Reactstrap.Modal>);
    }
}

所以我这样称呼这个 class ：

<GenericCard {...{other: other, headerArgs: headerArgs, bodyArgs: bodyArgs, footerArgs: footerArgs, 
              cardheader:header, cardbody:body, cardfooter:footer}} />

现在我知道这种方法有效，因为我已经尝试过使用className ，例如：

const bodyArgs = {className: 'my-5'};

我还希望能够通过onClick function - 但不仅仅是 function （正如我们在这个问题中看到的那样），而是整个事情： onClick=foo()

我在理解如何将onClick方法放入 json 样式格式中时遇到了一些问题，就像我对className所做的那样。

我不能在const bodyArgs = {...}中为onClick编写匿名 function ，并将其写为

const bodyArgs = {onClick: {foo}};

提供未定义的foo 。 我也不能放this.foo因为它也是一个意外的语法。

有什么想法吗？

Answer 1

Welp，在我发布此消息后立即找到了解决方案。

只是不需要{}大括号。

const bodyArgs = {onClick: this.foo};

做这项工作。

以为我会把它留在这里，以防有人偶然发现这个问题。

Answer 2

正如您所解释的那样，这应该可以工作，但是如果没有整个示例，我将无法完全知道。 这是一段工作代码和一个代码框链接，说明您要做的事情。

import React from "react";
import "./styles.css";

class ClickExecutor extends React.Component {
  render() {
    return (
      <div>
        <h4>Click Executor</h4>
        <div>
          <button onClick={() => this.props.bodyArgs.alert1()}>One</button>
          <button onClick={() => this.props.bodyArgs.alert2()}>Two</button>
        </div>
      </div>
    );
  }
}

class GenericModal extends React.Component {
  alert1 = () => {
    alert("Alert 1");
  };

  alert2 = () => {
    alert("Alert 2");
  };

  render() {
    const bodyArgs = {
      alert1: this.alert1,
      alert2: this.alert2
    };

    return (
      <div>
        <h1>Generic Modal</h1>
        <ClickExecutor
          {...{
            bodyArgs: bodyArgs,
            otherProps: "other various properties ..."
          }}
        />
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <GenericModal />
    </div>
  );
}

工作演示链接： https://codesandbox.io/s/smoosh-frost-rj1vb