访问react哑组件中的键属性值

Question

如何在我的哑组件内访问我的key属性值?

我有这个愚蠢的组件:

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>
    );
};

我传递给它的方法是:

highlightTag(event) {
    event.preventDefault();
    console.log(event.target);
}

我希望能够检索key属性，以便执行一些其他类型的逻辑。如何检索onClick

Answer 1

这不是最好的方法，相反，你应该让button成为一个单独的组件，你可以将onclick和key作为道具传递，然后在button组件中将两者合并在一起。快捷的方法如下

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

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

这样做的问题是，当React检查组件是否有任何变化时，它将总是返回true，因为渲染方法中的函数绑定。如果你不担心性能你可以不去管它但这是在渲染方法

Answer 2

我不确定是否需要在highlightTag函数中获得事件，但我会做

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

这将使函数highlightTag更具可重用性(例如，以编程方式调用该函数，而不是从用户交互中调用)。它还将解耦TagSummary的实现细节和它的父类。