主页 / 问题 / 1443805
Accepted
Андрей Солуянов
Asked:2022-08-29 19:53:44 +0000 UTC2022-08-29 19:53:44 +0000 UTC

反应渲染组件

  • 772

有一个组件，它是循环渲染的。

return (
    post.map((index)=>{
      
    return (
      
    <div className="responsive" key={index.id}>
      <div className="gallery">

      <Link to= {`/game/${index.slug}`}>
        <img src={index.poster} alt="Northern Lights" width="600" height="400"></img>
      </Link>

        <div>
          <div className="Completed_name">{index.name}</div>
          <div> <img id="like" src="images/like.png"  width="10" height="10"></img>{index.rating}</div>
        </div>

      </div>
    </div>)
    
  }
    )
  )

我希望在此代码中不是在组件调用文件中，而是在此代码中，首先插入一个 div 块，即

return (
       <div id="vt"></div>
        post.map((index)=>{
          
        return (....

我不明白如何插入它。这样在地图之前有一个块。

javascript

1 个回答

  1. Best Answer

    如果代码在同一级别有 2 个或更多块，则 JSX 需要包装器。如果这个包装器或某些功能不应该有样式，你可以使用React fragment，它的缩写<></>是空标签

    此外，如果您在 JSX 包装器中显示一些非 JSX 代码，则必须将其包装在花括号中。

    顺便说一句，如果不需要预处理，map可以写成不带return的缩写形式

    原来是这样的

    return (
    <>
      <div id='vt'></div>
      {post.map((index) => (
        <div className='responsive' key={index.id}>
          <div className='gallery'>
            <Link to={`/game/${index.slug}`}>
              <img
                src={index.poster}
                alt='Northern Lights'
                width='600'
                height='400'
              ></img>
            </Link>

            <div>
              <div className='Completed_name'>{index.name}</div>
              <div>
                <img
                  id='like'
                  src='images/like.png'
                  width='10'
                  height='10'
                ></img>
                {index.rating}
              </div>
            </div>
          </div>
        </div>
      ))}
    </>
  );
    • 0

相关问题