javascript - 在 react dumb组件中访问关键属性值

Question

如何访问我的dumb组件中的 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

这不是最好的方法，相反，您应该让按钮成为一个单独的组件，您可以在其中将 onclick 和键作为 Prop 传递，然后在按钮组件中将两者合并在一起。快速而肮脏的方法如下

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

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

问题在于，当 React 检查组件是否发生任何变化时，由于 render 方法中的函数绑定(bind)，它总是会返回 true。如果您不担心性能，您可以保持这种状态，但这是在渲染方法中使用绑定(bind)的缺陷