Javascript 访问组件中的键属性值

如何访问哑组件中的

键

属性值

我有一个愚蠢的部分：

const TagSummary = ({ tags, highlightTag }) => {
    if (!tags) {
        return <div />;
    }
    return (
        <div>
            {Object.keys(tags).map((tag) => {
                return (
                    <div key={ tag }>
                        <button type="button" onClick={ highlightTag }>
                            <pre>&lt;{ tag }&gt;</pre>
                        </button>
                        <p>{ tags[tag] }</p>
                    </div>

                );
            })}
        </div>
    );
};

---

我希望能够检索

键

属性，以便执行其他类型的逻辑。如何检索按钮？这不是最好的方法，相反，您应该将按钮作为一个单独的组件，在其中可以将按钮和键作为道具传递，然后在按钮组件中将两者合并在一起。捷径如下

<button type="button" onClick={ev => {
  ev.preventDefault();
  highlightTag(tag); 
}}>

这将确保始终将该参数提供给highlightTag函数

---

但问题是，当React检查组件是否有任何更改时，由于render方法中的函数绑定，它将始终返回true。如果您不担心性能，您可以这样做，但这是在渲染方法中使用绑定的陷阱，我不确定您是否需要在

highlightTag

函数中获取事件，但我会这样做

{
ev.preventDefault（）；
highlightTag（tag）；
}}>

---

这将使函数

highlightTag

更加可重用（以编程方式调用此函数，而不是从用户交互中调用）。它还将使TagSummary的实现细节与其父项解耦。

您无法读取

键

属性，但可以将

标记

作为参数传递给处理程序

e=>highlightTag（e，tag）

警告：反模式

<button type="button" onClick={ highlightTag.bind(this, tag) }>

<button type="button" onClick={ev => {
  ev.preventDefault();
  highlightTag(tag); 
}}>