javascript - 嵌套 map 中的 Reactjs handleclick 绑定(bind)不起作用

Question

我正在用 React 编写一个简单的博客组件。该组件从第二个文件获取帖子并使用 map(特别是两个嵌套的 map)呈现内容和主题标签。我试图创建一个部分，点击时主题标签会突出显示，因此我正在关注 this question 的答案片段。 .事实是它不起作用，特别是它不起作用的是通过 bind 进行的绑定(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

有人知道哪里出了问题吗？嵌套映射是绑定(bind)问题吗？

Answer 1

React 期望返回一个元素。您可以通过将返回值包装在片段中来解决此问题 <React.Fragment>或 <> .此外，您不需要绑定(bind)箭头函数( 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>))
</>)}}