Question

状态

state = {
    posts: [],
}

帖子获得的API值

{
  "authors": [
    {
      "authorName": "Sideney Sheldon",
      "authorImageURL": "http..."
    },
    {
      "authorName": "Sideney Sheldon",
      "authorImageURL": "http..."
    },
    ....
  ]
}

代码

render(){
  const postList = posts.length ? (
    posts.map(post => {
      return (
        <div className="" key={this.state.key}>
          <div className="containerimager">
            <img  style={imgb} src={post.authorImageURL} />
          </div>
          <h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
        </div>
      )
    })
  ) : 
  (
      <div className="center">No posts to show</div>
  );

  return(
    {postList}
  )
}

{postlist}返回对象，但返回网页中新行中的每个对象我想要所有结果（图像）在同一行谁能帮忙吗？

Answer 1

如果要在同一行中包含多个元素，则可以使用CSS实现。在display: flex的包装器上使用row（默认情况下，弹性方向为postList，这是您所需要的）。您可以通过JSX将其作为样式传递，也可以添加指定此属性的类

render(){
  const postList = posts.length ? (
    posts.map(post => {
      return (
        <div className="" key={this.state.key}>
          <div className="containerimager">
            <img  style={imgb} src={post.authorImageURL} />
          </div>
          <h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
        </div>
      )
    })
  ) : (
  <div className="center">No posts to show</div>
  );

  return(
    <div style={{display: 'flex'}}>{postList}</div>
  )
}

Answer 2

这是我使用您的代码创建的CodeSandbox sample。

如果您要水平排列用户（从左到右），那么CSS是可行的方法。特别是，默认情况下，要映射的<div>具有display: block样式，这使其在页面中占据了自己的行。

要div并排排列，您需要以某种方式应用display: inline-block样式。在我的示例中，我使用了style道具，但您可能希望直接在CSS中使用它。

Answer 3

这是CSS问题，您应在父div上将display: flex与flex-direction: row一起使用，以提供所需的结果。

Answer 4

posts.map(post,index => {
          return (
            <div className="" key={this.state.key}>
            <div className="containerimager">
  <img  style={imgb} src={post.authors[index].authorImageURL} />
   </div>
<h6 style={{ marginTop:"23px"}} >{post.authors[index].authorName}</h6>
</div>
          )
        })
      ) : (
        <div className="center">No posts to show</div>
      );

尝试一下

React无法在单行中呈现数组（状态）

4 个答案: