0

我在 react js 中开发卡片，该卡片根据 API 数据自动生成，但所有卡片都显示在其他卡片下方，我想以行方式设计该卡片。我尝试了很多方法来设计那张卡片，但还没有完成。我尝试内联 CSS，一些 react-bootstrap 类。所以请给我一些关于如何设计这张卡的建议。

class App extends React.Component {

elements = [];
state = {
    data:[ null ]
};

getBikes = () => {
    try {
        return axios.get('URL')
    } catch (error) {
        console.error(error)
    }
}

constructor(props) {
    super(props);
    this.props = props;
    //this.elements=["one", "two", "three", "four"];
}

componentDidMount() {
    const breeds = this.getBikes()
        .then(response => {
            if (response) {

                console.log(response.data.message)
                var arr = (response.data.message);
                //var elements = [];

                for (var i = 0; i < arr.length; i++) {
                    console.log(arr[i].bikeId)
                    this.elements.push(<div>
                        <Cards value={arr[i]} />
                    </div>);
                }
                this.setState({ data: arr[0].bikeId })
            }
        })
        .catch(error => {
            console.log(error)
        })
}

render() {

    console.log("printitng")
    //const array = [1,2];
    return (
        <div style={{ display: "flex" }}>
            <h1>{'This will always render'}</h1>
            {this.state && this.state.data &&

                this.state.map((item, index) => {
                    return <div key={index} style={{ width: "300px" }}>
                        <Cards elements={this.elements} /> //pass your props value
                    </div>
                })

                // < div >
                // <Cards elements={this.elements} /> //pass your props value
                // </div>

            }
        </div>
    )


}

}

4

2 回答 2

1

只有一个更正。您已经使用块元素 div 推送了数组的元素。您需要使用 span 推送元素，或者您可以为 div 提供类并从块更改为 flex 或内联块。

 componentDidMount() {
            const breeds = this.getBikes()
                .then(response => {
                    if (response) {
                console.log(response.data.message)
                var arr = (response.data.message);
                //var elements = [];

                for (var i = 0; i < arr.length; i++) {
                    console.log(arr[i].bikeId)
                   // Changed from div to span
                    this.elements.push(<span>
                                            <Cards value={arr[i]} />
                                       </span>);
                }
                this.setState({ data: arr[0].bikeId })
            }
        })
        .catch(error => {
            console.log(error)
        })
}

render() {

    console.log("printitng")

    return (
        <div>
            <h1>{'This will always render'}</h1>
            {this.state && this.state.data &&
                <div>
                    <Cards elements={this.elements} /> //pass your props value
                </div>
            }
        </div>
    )


}

}

于 2020-02-25T07:38:16.387 回答
0 
class App extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   bikeId : null,
   data : []
  }
 }

 getBikes = () => {
  try {
      return axios.get('URL')
  } catch (error) {
      console.error(error)
  }
 }
 componentDidMount() {
  const breeds = this.getBikes()
      .then(response => {
          if (response) {
              this.setState({ data: response.data.message, bikeId: response.data.message[0].bikeId })
          }
      })
      .catch(error => {
          console.log(error)
      })
 }

 render() {
  return (
      <div style={{ display: "flex" }}>
          {
            this.state.data.map((item, index) => {
                return <div key={index} style={{ width: "300px" }}>
                          <Cards value={item} />
                       </div>
            })
          }
      </div>
  )
 }
}

给父类 flex 属性，那么你可以在一行中添加尽可能多的子类。

于 2020-02-25T06:54:20.820 回答