React自定义组件使用onClick传参注意:onClick只是一个名字而已!

核心:

React自定义组件不是真实DOM,所以没有onClick属性,

如果对React自定义组件写上onClick,也只是个单纯的名字而已,onClick的值作为props传到子组件.

例如:

function Square(props) {
    return (
        <button
            onClick={props.onClick}
        >
        </button>
    );
}

class Board extends React.Component {
    render() {
        //实际上这个onClick是通过上面<button>的onClick来调用的
        return (
           <Square 
               onClick={console.log('hello')} 
           />
        );
    }
}

 

问题来源:

完整代码
React 自定义组件 onClick 传参
这是React官网上的那个井字棋案例https://react.docschina.org/tutorial/tutorial.html

问题解决
传数字进去， renderSquare ， 给Square组件绑定onClick事件， 然后事件处理函数里面就是对外输出传进来的这个数字

来源：CSDN

作者：苏一恒

链接：https://blog.csdn.net/HuoYiHengYuan/article/details/104283344