在反应哑组件中访问关键属性值答案

【问题标题】：Accessing key property value within react dumb component在反应哑组件中访问关键属性值
【发布时间】：2017-01-22 20:46:43
【问题描述】：

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

【问题讨论】：

您无法读取key 属性，但您可以将tag 作为参数传递给处理程序e => highlightTag(e, tag) 警告：反模式

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

我不确定您是否需要在 highlightTag 函数中恢复事件，但我会这样做

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

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

【讨论】：