javascript - 嵌套地图中的Reactjs handleclick绑定不起作用

Question

我正在用 React 编写一个简单的博客组件。map 该组件从第二个文件中获取帖子，并使用（特别是两个嵌套的）呈现内容和主题标签 map。我试图创建一个在单击时突出显示主题标签的部分，因此我正在关注这个问题的答案片段。事实是它不起作用，特别是它不起作用的是绑定通过bind（检查console.log输出）

class Blog extends React.Component {
state= {
    open: {}
}

handleClick = (k) => {
    let linkOpenState = true;
    if (this.state.open.hasOwnProperty(k)) {
        linkOpenState = !this.state.open[k];
    }
    this.setState({ open: { [k]: linkOpenState } })
}

render(){
return(
posts.map(i=>(
  <div class="box">
    <article class="media">
      <div class="media-content">
        <div class="content">
        <h1 class="title">{i.title}</h1>
          <p>
            {i.content}
          </p>
        </div>
        <div class="tags">
         {i.hash.map(k=>(<span id={k} onClick={this.handleClick.bind(this,k)} class={this.state.open[k]? "tag is-primary" : "tag"} >{k}</span>))}
        </div>
      </div>
    </article>
  </div>))
)
}
}
export default Blog

有人知道那里出了什么问题吗？嵌套地图是绑定的问题吗？

标签： javascriptreactjs

Answer 1

React 期望单个元素作为返回。您可以通过将返回包装在片段中来解决此问题，如<React.Fragment>or <>。此外，您不需要绑定箭头函数（handleClick映射时i.hash）。

render(){
 return(
  <>
  posts.map(i=>(
  <div class="box">
    <article class="media">
      <div class="media-content">
        <div class="content">
        <h1 class="title">{i.title}</h1>
          <p>
            {i.content}
          </p>
        </div>
        <div class="tags">
          {i.hash.map(k=>(<span key={k} id={k} onClick={() => this.handleClick(k)} class={this.state.open[k]? "tag is-primary" : "tag"} >{k}</span>))}
        </div>
      </div>
    </article>
  </div>))
</>)}}