Javascript 我想在React js中设计自动生成的卡

我在react js中开发卡片，该卡片根据API数据自动生成，但所有卡片都显示一个低于另一个，我希望以行方式设计该卡片。我尝试了很多方法以行的方式设计卡片，但都没有完成。我尝试内联CSS，一些反应引导类。所以，请给我一些关于如何设计这张卡的建议

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>
    )


}

}

---

赋予父类flex属性，然后可以在一行中添加任意多的子类

只有一个修正。您已经使用块元素div推送了数组元素。您需要使用span推送元素，或者您可以将类赋予div，并从block更改为flex或inline block

 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>
    )


}

---

}

将display:flex用于CardsHanks的父级，但使用此选项将复制基于数组值的所有卡&我只想显示基于API dataresponse.data.message长度的卡，它将决定生成多少react卡及其数组，因此您必须将其保存在您的状态，好的，我把API响应保存在react状态下，但我不明白我是如何使用react状态作为数组并映射到它上面的。非常感谢你，iamnotbatma，我陷入了这个问题，因为现在在你的帮助下，问题解决了。

 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>
    )


}