反应道具 function 未定义 [重复]

Question

这个问题在这里已经有了答案：

为什么我的 onClick 在渲染时被调用？ - React.js （5 个答案）

2 小时前关闭。

我有一个元素，它有一个 onClick 道具，然后是另一个调用这个道具的元素，并执行一些其他操作。

这是代码：

仪表板侧边栏：

class DashboardSidebar extends Component{
constructor(props){
    super(props);

    this.expandOption = this.expandOption.bind(this);
}

expandOption(id){
   ...
}

render(){
    return(
        <div className="DashboardSidebar">
            ...
            <DSidebarOption onClick={this.expandOption("dashboard")} id="dashboard" text="Dashboard" />
            ...
        </div>
    );
}
}

边栏选项：

class DSidebarOption extends Component{
constructor(props){
    super(props);

    this.handleClick = this.handleClick.bind(this);
}

handleClick(){
    ...
    this.props.onClick();
    ...
}


render(){
    return(
        <div className="DSidebarOptionContainer">
            ...
            <div onClick={this.handleClick} className="DSidebarOption">
                {this.props.text}
            </div>
            ...
        </div>
    )
}
}

我收到以下错误：

Uncaught TypeError: this.props.onClick is not a function

任何想法为什么会发生这种情况？

Answer 1

你应该像这样通过你的 onclick

onClick={() => {this.expandOption("dashboard")}}

否则它会在页面挂载时被调用