Javascript 是否可以将带有参数的函数作为道具传递，然后将该函数作为道具引用？

我想这样做，当我点击div时，它会在控制台中注销asdf，但我不确定作为道具传递的方法是否是这样工作的

export class App extends Component {
   render() {
      func = (param) => {
         console.log(param);
      }

      return (
         <Card function={this.func} />
      )
    }
}

export class Card extends Component {
   render() {
      return(
         <div onClick={this.props.function("asdf")}> this is a div </div>
      )
   }
}

---

您的想法很好，但该特定实现存在两个问题：

函数在JavaScript中是一个关键字，所以不要将其用作标识符。 onClick={foobar}意味着在渲染时调用foobar，然后将该调用的结果作为click处理程序。您可能需要onClick={=>foobar}，这意味着在单击元素时调用foobar。

---

您的想法很好，但该特定实现存在两个问题：

函数在JavaScript中是一个关键字，所以不要将其用作标识符。 onClick={foobar}意味着在渲染时调用foobar，然后将该调用的结果作为click处理程序。您可能需要onClick={=>foobar}，这意味着在单击元素时调用foobar。

---

类似于Joseph的建议，但也要注意，您希望将函数拉到render方法之外。下面是它的外观：

export class App extends Component {
  printParam = param => {
    console.log(param);
  };

  render() {
    return <Card printParam={this.printParam} />;
  }
}

export class Card extends Component {
  render() {
    return (
      <button
        onClick={() => {
          this.props.printParam('asdf');
        }}>
        Click Me
      </button>
    );
  }
}

---

类似于Joseph的建议，但也要注意，您希望将函数拉到render方法之外。下面是它的外观：

export class App extends Component {
  printParam = param => {
    console.log(param);
  };

  render() {
    return <Card printParam={this.printParam} />;
  }
}

export class Card extends Component {
  render() {
    return (
      <button
        onClick={() => {
          this.props.printParam('asdf');
        }}>
        Click Me
      </button>
    );
  }
}

将您的自定义方法放入。func进入类范围并将其从渲染中移除。我之所以说它要从render方法中删除，是因为它在调用this.func时指向类的属性和方法。由于类的全局作用域中没有定义func属性或方法，所以它将返回未定义的 您可以使用有意义的名称传递prop，而不是function，因为function可以指示javascript中的本地function关键字，正如Joseph在回答中所说的那样 您的代码可以通过以下方式更新：

export class App extends Component {
    func = param => {
        console.log(param);
    };
    render() {
        return <Card myFunction={this.func} />;
    }
}

export class Card extends Component {
    render() {
        return (
            <div onClick={() => this.props.myFunction('asdf')}>
                {' '}
                this is a div{' '}
            </div>
        );
    }
}

将您的自定义方法放入。func进入类范围并将其从渲染中移除。我之所以说它要从render方法中删除，是因为它在调用this.func时指向类的属性和方法。由于类的全局作用域中没有定义func属性或方法，所以它将返回未定义的 您可以使用有意义的名称传递prop，而不是function，因为function可以指示javascript中的本地function关键字，正如Joseph在回答中所说的那样 您的代码可以通过以下方式更新：

export class App extends Component {
    func = param => {
        console.log(param);
    };
    render() {
        return <Card myFunction={this.func} />;
    }
}

export class Card extends Component {
    render() {
        return (
            <div onClick={() => this.props.myFunction('asdf')}>
                {' '}
                this is a div{' '}
            </div>
        );
    }
}

---

这很好，我只是不使用单词function，因为它是保留的。还请注意，您在这里执行此函数的方式可能不是您所期望的。正如@MattWay所说，您可能希望将func从呈现方法中拉出，并将其定义为应用程序上的函数。这很好，我只是不使用单词function，因为它是保留的。另外请注意，您在这里执行此内部func的方式可能不是您所期望的。正如@MattWay所说，您可能希望将func从呈现方法中拉出，并将其定义为应用程序上的函数。我很高兴为您提供帮助我很高兴为您提供帮助