本文主要讲述如何在 React 回调中回传参数。

方案一：使用 data-* 属性

这种方案仅仅适用于 HTML5 元素，不适用于经过封装的组件。

const Demo = () => {
    function handleClick(e) {
        console.log(e.target.dataset.text);  // 你点了我
    }

    return (
        <div
            data-text="你点了我"
            onClick={this.handleClick}
        >
            点我点我
        </div>
    )
};

export default Demo;

方案二：箭头函数

const Demo = () => {
    function handleClick(e, text) {
        console.log(text);  // 你点了我
    }

    return (
        <div onClick={(e) => handleClick(e, '你点了我')}>
            点我点我
        </div>
    )
};

export default Demo;

总结

使用方案一，在性能上优于方案二，因为方案二每次 render 都会重新生成一个新的 handleClick 函数并且进行绑定。

对于 HTML5 元素，推荐使用方案一。

但由于经过封装的组件无法获取其 dataset 值，所以只能使用方案二。