Question

我有一个自定义反应组件如下

const MyWidget = (props) => (
    <div>
        {props.options.map((option) => (
            <div onClick={(evt) => { onSelect(evt); }}>option</div>
        ))}
    </div>
);

我希望将div的索引传递给父onSelect。我过去一直这样做的方式是：

const MyWidget = (props) => (
    <div>
        {props.options.map((option) => (
            <div onClick={(evt) => { onSelect(option, evt); }}>option</div>
        ))}
    </div>
);

但是如果我做了

，我的小部件会更像本机小部件

const MyWidget = (props) => (
    <div>
        {props.options.map((option) => (
            <div onClick={(evt) => {
                evt.selectedOption = option;
                onSelect(evt); 
            }}>option</div>
        ))}
    </div>
);

所以父母可以像使用原生元素一样注册回调。有什么理由为什么这样做是个坏主意？我猜名称冲突将是一个，但也许这可以通过树结构来缓解，父母有责任知道在子事件中使用了什么名称。此外，合成事件是可以依赖的还是可以不时变化的实现功能？

像气泡一样改变React SyntheticEvent是一种好习惯吗？

0 个答案: