时间戳

首页 > 解决方案 > 在 React js 中渲染 2 个组件

javascript - 在 React js 中渲染 2 个组件

问题描述

我在我的项目中遇到了一个问题我使用了 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>        
    )
}

card 和 speedometer 是两个不同的组件，它将基于 API 响应创建

标签： javascriptreactjsreduxreact-redux

解决方案

通过覆盖，如果您的意思是组件相互重叠，这可能是 CSS 问题，请尝试<br>在两个组件之间放置一个。

或者

尝试将宽度增加到 100% 并删除 300px

推荐阅读