reactjs - 反应渲染多个从 Material-UI 不使用 map()

Question

我已经构建了一个示例项目，我从后端服务器接收动态数据。数据存储在数组中

然后我构建了这个输入框组件。

//data_View is a functional Component
const  data_View = (props) =>
(

    <div className="form-input">

           <input style={{backgroundColor: `${props.backgroundColor}`}}
            type="text"
            name={props.dataId}
            value={props.content} 

        />
     </div>
);

data_View.propTypes = {
    dataId:PropTypes.string,
    content: PropTypes.string,
};

export default data_View;

然后在我的 App.js 中，根据数组的大小（这是静态的，当前为 3），我正在渲染 data_View 组件 e 次，每个都有不同的 prop 值，如下所示：

<div className="Data3">
                <data_View backgroundColor={this.state.bColor[2]}
                content = {this.state.value[2]} 
                name = "data3"
                />
            </div>

这完全符合我的愿望。

接下来我尝试用 Material-UI 中的 Card 替换输入框。在这样做的过程中，我了解到一次只渲染一张卡片。

除非我使用 map()，否则根据我找到的示例，类似这样的东西......

const topics = [
   { 
      name: "data1",
      value: "3",
   },
   {
     name: "data2",
     value: "5"
   }

]
{topics.map(data=>(
            <Card style={{backgroundColor:`${props.backgroundColor}`}}>
                <CardActionArea >
                    <CardMedia
                       ...
                      />
                 </CardActionAre>
                 </Card>
))}

我不知道如何重构上面的示例以适应我的场景。我无法像示例一样创建数组，因为我从服务器获取数据流并且不断变化。

任何想法，建议都非常感谢。

谢谢

标签： reactjsmaterial-ui