Javascript Reactjs-can'；t将onClick应用于渲染组件

如果我在React类组件中有以下代码：

      <svg viewBox="-100 -100 600 500" id='renderName' >
            <Initial value={this.props.value.substring(0,1)} /> 
      </svg>

我似乎只能从容器svg触发onClick事件，而不能从正在渲染的“初始”组件触发onClick事件

例如

^工作

      <Initial value={this.props.value.substring(0,1)} onClick={this._onButtonClick} />

^不起作用

知道为什么会这样吗？这是否与将“onClick”作为道具传递而不是调用函数有关

---

作为更新：

Initial

正在另一个组件中呈现。在这个组件上，我想用onClick调用一个函数。

Initial

在您的代码中是一个组件，而不是元素，因此您应该将这个组件获得的

onClick

属性传递给它呈现的实际元素：

class Initial extends React.Component {

    render() {
        return <rect
                   ...
                   ...
                   onClick={this.props.onClick}
               />
    }
}

类初始扩展React.Component{
render（）{
返回
}
}

什么是

Initial

呈现？Initial呈现一个基本元素，将其放入SVGThank中以获得答案。目前“Initial”只是一个功能组件，它是否必须基于类才能工作？这是否会将onClick事件发回引用“Initial”的组件？@Calibre，欢迎您。如果正确，请接受并投票。谢谢今晚我要试试。是否可以以这种方式使用属性来调用父组件上的函数？（如果有帮助的话，我对原来的问题稍加修改。）是的，你可以。理解组件和元素之间的差异很重要。所有事件都是在元素而不是组件上触发的。当您查看组件时，您仅从组件的父级传递对组件的引用，并且在那里您可以将此引用用作事件的一部分。

class Initial extends React.Component {

    render() {
        return <rect
                   ...
                   ...
                   onClick={this.props.onClick}
               />
    }
}