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

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

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

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

这个问题是，当React检查组件是否有任何变化时，由于render方法中的函数绑定，它总是返回true。如果您不担心性能，可以将其保留，但这是在render方法中使用绑定的缺陷

Answer 2

我不确定你是否需要在highlightTag函数中重新获取该事件，但我会这样做

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

这将使您的函数highlightTag更具可重用性（以编程方式调用此函数，而不是来自用户交互）。它还会将TagSummary的实现细节与其父级分离。

在react哑组件中访问关键属性值

2 个答案: