Javascript 将传递的onClick作为所需子组件的道具进行反应？

我试图通过向父组件添加

onClick

来触发子组件内部的

onClick

函数调用。它不起作用

// parent component
class MainForm extends Component {
  // code here

  handleClick = () => {
    console.log('clicked!');
  }

  render {
    return (
    <Linkbutton
        text="Click Me!"
        onClick={this.handleClick}>
    />
  );
};

// sub component
export const LinkButton = (props) => {
  return (
    <button>{props.text}</button>
  );
};

这起作用了。我的问题是为什么？不应该对任何元素调用

onClick

，而不管它里面是什么？为什么我也要显式地将它传递给子组件

---

我想了解这样做的原因，以及为什么我第一次尝试的方法不起作用。谢谢

原因是您创建的LinkButton组件只是一个javascript对象，而不是DOM节点，因此它没有像onClick这样的事件处理程序。button元素被转换为实际的DOM元素，因此它将具有与实际HTML元素关联的所有事件处理程序

将onClick道具添加到LinkButton组件时，它只是对象的一个属性。通过从该组件内部调用props.onClick，您只需调用存储在属性内部的函数，如下所示：

let props = {
    onClick: function () { alert("Executed!"); }
};

props.onClick();

---

希望这对你有帮助

在第一个示例中，实际上并没有添加onClick事件。只是将引用传递给组件并不意味着它自动知道如何处理它

第二个示例确实向按钮添加了onClick，这就是它工作的原因

---

在第一个示例中，您使用“onClick”作为参数，而不是实际的事件处理程序。

您有点困惑

onClick

您在

Linkbutton

组件中传递的道具不会触发您的函数调用。在react中，我们使用道具在组件之间进行通信

onClick

是

button

元素中的事件，而

onClick

是

Linkbutton

组件中的道具。

不幸的是，在纯React.js中无法绕过这一点。如果希望父元素的函数处理对子元素执行的单击事件，则必须将该函数作为道具显式传递给子元素

我理解为什么有时它看起来令人沮丧，特别是如果您有一个高大的组件树和该树的许多叶子，它们必须调用父元素的方法、父元素的父元素，甚至父元素[…]的父元素的父元素

缓解该问题的一种方法（特别是当您的项目变得庞大时）是使用实现流量模式的状态存储。Redux就是一个很好的例子。您的按钮组件将发送一个操作，然后由reducer函数处理，从而更新应用程序的全局状态，而不是调用从父组件作为prop传递的方法（这种方法在大多数情况下会改变父组件的状态）。应用程序中所有依赖于已更改的全局状态部分的组件都将相应地更新。在本例中，按钮组件不会直接与父元素通信。它只会发出一个动作

---

如果您决定学习Redux，您应该阅读。请记住，Redux通常被认为有点难以开始，因此，它最适合大型应用程序，因为在应用程序中添加Redux导致的项目复杂性的初始增加被添加的避免组件之间直接通信所导致的所有问题的能力所抵消。

handleClick

是一种类方法，因此它只在该类的实例上运行。如果你想让子类访问这个函数，你需要像以前一样显式地传递它。谢谢！我的所有项目都使用Redux。我只是对这件我以前没见过的小东西感到好奇。我的意思是我可能有，只是从来没有真正引起我的注意！我尽量避免把东西作为道具传下去。谢谢你，伙计，你的解释正是我想要的。我通常将onClick直接传递给DOM元素，很少传递给组件，所以我现在才遇到这个问题！你解释得最好，恭喜你！

let props = {
    onClick: function () { alert("Executed!"); }
};

props.onClick();