原因是您创建的LinkButton组件只是一个JavaScript对象，而不是DOM节点，因此它没有像onClick这样的事件处理程序。按钮元素被转换为实际的DOM元素，因此它将具有实际HTML元素的所有关联事件处理程序。
当您将onClick属性添加到LinkButton组件时，它只是对象的一个属性。通过从组件内部调用props.onClick，您只是调用了存储在属性内部的函数，类似于以下内容：

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

props.onClick();

字符串
希望这对你有帮助！

在第一个示例中，您实际上并没有添加onClick事件。仅仅将引用传递给组件并不意味着它会自动知道如何处理它。
第二个例子实际上是向按钮添加了onClick，这就是它工作的原因。
在第一个示例中，您使用“onClick”作为参数，而不是作为实际的事件处理程序。

你有点困惑。传入Linkbutton组件的onClick属性不会触发函数调用。在react中，我们使用props来在组件之间进行通信。onClick是button元素中的事件，而onClick是Linkbutton组件中的props。

不幸的是，在纯React.js中没有办法解决这个问题。如果希望父元素的函数处理在子元素上执行的单击事件，则必须将该函数作为prop显式传递给子元素。
我理解为什么有时候它看起来令人沮丧，特别是如果你有一个很高的组件树和该树的许多叶子，它们必须调用parent，parent的parent，甚至parent的parent的parent的parent的方法。]元素。
缓解该问题的一种方法（尤其是当项目变得很大时）是使用实现Flux模式的状态存储。一个很好的例子就是Redux。你的按钮组件不会调用从父组件传递过来的方法作为 prop （这种方法在大多数情况下会改变父组件的状态），而是会分派一个动作，然后由reducer函数处理，从而更新应用程序的全局状态。然后，依赖于全局状态中发生更改的部分的应用程序的所有组件都将相应地更新。在这个例子中，按钮组件不会直接与父元素通信。它只会派遣一个行动。
Here is a great tutorial，如果你决定学习Redux，你应该阅读。请记住，Redux通常被认为是有点难以开始，因此它最适合大型应用程序，其中由于将Redux添加到应用程序而导致的项目复杂性的初始增加被避免组件之间直接通信所导致的所有问题的能力所抵消。

还有一种方法

function App(){

const handleClick = () => {
 console.log("fired")
}

return (
  <Button handleClick={handleClick}/>
)
}

// in your subcomponent
function Button ({handleClick}){
 return <button onClick={handleClick}>...</button>
}

字符串
函数handleButtonClick在父组件中定义。对该函数的引用作为Button组件上handleClick属性的值传递。该函数在中接收，并在单击事件时调用。