时间戳

首页 > 解决方案 > 将多个事件附件反应为 jsx 表达式

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

问题描述

您好我有一个关于 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 中的所有事件的情况下实现这种模式？

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

标签： javascriptreactjs

解决方案

您可以像对象一样定义事件侦听器，并使用 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或其他名称）并在运行时得到错误。但这是可能的:)

推荐阅读