在 react js 中渲染 2 個組件

Question

我在我的項目中遇到了一個問題 我使用了 2 個不同的組件，一個是卡片，第二個是圖表，我在該組件上顯示 API 數據，但是當我渲染這兩個組件時，它將相互覆蓋我如何解決這個問題

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

卡和車速表是兩個不同的組件，它將根據 API 響應創建

Answer 1

通過覆蓋，如果您的意思是組件彼此重疊，這可能是 CSS 問題，請嘗試在兩個組件之間放置一個<br> 。

或者

嘗試將寬度增加到 100% 並刪除 300px