javascript - 将多个事件附件 react 为 jsx 表达式

Question

您好，我有一个关于 JSX 语法支持的问题，是否可以在 js 对象中给出 jsx 表达式？

我有一个像这样的 Button 组件，

import React, {Component} from 'react';

export default function ButtonComponent(props){

    return (
        <button id={props.id} type="button" onClick={props.onClick} onMouseDown={props.onMouseDown} >
        {props.value}
        </button>
    )
}

它将被用在其他一些组件中，比如下面，

<ButtonComponent id="first" value="First" onClick={this.clickHandler} onMouseDown={this.mouseDownHandler}/>

如您所见，系统会为事件创建一个数组模式。它可能随着 onMouseOver、onMouseUp 等事件而增长。

所以我想知道我是否可以将所有事件作为一个对象传递并使用扩展运算符附加它们？

比如我将 ButtonComponent 修改为，

import React, {Component} from 'react';

export default function ButtonComponent(props){

    return (
        <button id={props.id} type="button" {...props.events} >
        {props.value}
        </button>
    )
}

然后像下面这样使用这个组件，

<ButtonClass id="first" value="First" 
events={{onClick:{this.clickHandler}, onMouseDown:{this.mouseDownHandler}, onMouseOver:{this.mouseOverHandler}}}/>

但它会抛出语法无效的错误。

如果我像下面这样更新事件对象，它会通过语法验证但事件不会执行。

<ButtonClass id="first" value="First" 
events={{onClick:(this.clickHandler), onMouseDown:(this.mouseDownHandler), onMouseOver:(this.mouseOverHandler)}}/>

有没有办法在不附加 ButtonComponent 中的所有事件的情况下实现这种模式？

抱歉发了这么长的帖子..

Answer 1

您可以像对象一样定义事件监听器，并使用 rest-spread 运算符将其传递给组件。例如

const EVENTS = {
    onMouseOver: () => console.log("mouseover"),
    onMouseOut: () => console.log("mouseout"),
    onClick: () => console.log("click"),
    ...
}

class MyCoolComponent extends React.Component {
    render() {
        return <button {...this.props.events}>{this.props.children}</button>
    }
}

ReactDOM.render(
    <MyCoolComponent events={EVENTS}>Some children</MyCoolComponent>,
    document.body
)

但是，这不是很方便，因为您总是会输入错误的事件属性名称(例如 onCLick 或其他)并在运行时出现错误。但这是可能的:)