代码之家 › 专栏 › 技术社区 › Nina

反应:水平映射数据

jsx reactjs javascript

Nina · 技术社区 · 4 年前

这是我的代码:

    return (
        <div>
          {this.state.serials.map((number) => {
    return number.s && number.s.length? (
      <div>
    <Card className="card" style={{ width: '18rem' }}>
      <Card.Body>
        <div className="row">
          <div className="col">
        <h2>{number.s[0].l}</h2>
        </div>
        <div className="vl"></div>
        <div className="col">
        <h4>{number.s[0].d[0]}</h4>
        {number.s[0].ta} 
        <FontAwesomeIcon onClick={()=>this.deleteCard(number.s[0].ta)} icon={faTrashAlt} />
        </div>
        </div>
        </Card.Body>
    </Card>
    <p></p>
    </div>
  ) : null
})}
      </div>
    );

提前谢谢!

2 回复 | 直到 4 年前

KnowYourElements 4 年前

如果你想把卡放进去

X Y Z

而不是

X
Y
Z

然后我建议将一个容器与显示器:flex

    return (
        <div class="container" style={{display: "flex"}}>
          {this.state.serials.map((number) => {
    return number.s && number.s.length? (
      <div>
    <Card className="card" style={{ width: '18rem' }}>
      <Card.Body>
        <div className="row">
          <div className="col">
        <h2>{number.s[0].l}</h2>
        </div>
        <div className="vl"></div>
        <div className="col">
        <h4>{number.s[0].d[0]}</h4>
        {number.s[0].ta} 
        <FontAwesomeIcon onClick={()=>this.deleteCard(number.s[0].ta)} icon={faTrashAlt} />
        </div>
        </div>
        </Card.Body>
    </Card>
    <p></p>
    </div>
  ) : null
})}
      </div>
    );