如何访问我的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><{ tag }></pre>
</button>
<p>{ tags[tag] }</p>
</div>
);
})}
</div>
);
};
我传入的方法是这样的:
highlightTag(event) {
event.preventDefault();
console.log(event.target);
}
我希望能够检索 key
属性以执行其他类型的逻辑。如何检索它 onClick
?
最佳答案
这不是最好的方法,相反,您应该让按钮成为一个单独的组件,您可以在其中将 onclick 和键作为 Prop 传递,然后在按钮组件中将两者合并在一起。快速而肮脏的方法如下
<button type="button" onClick={ highlightTag.bind(this, tag) }>
这将确保该参数始终提供给 highlightTag 函数。
问题在于,当 React 检查组件是否发生任何变化时,由于 render 方法中的函数绑定(bind),它总是会返回 true。如果您不担心性能,您可以保持这种状态,但这是在渲染方法中使用绑定(bind)的缺陷
关于javascript - 在 react dumb组件中访问关键属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39500705/