reactjs中如何动态添加元素到div答案

【问题标题】：How to add elements to div dynamically in reactjsreactjs中如何动态添加元素到div
【发布时间】：2018-02-13 10:11:42
【问题描述】：

我对反应很陌生..如果有人可以帮助我，请。

我已经从 web 服务接收到 json 格式的数据并且有数组。所以收到的数据是这样的： enter image description here 现在我想要的是在前面它应该创建一个屏幕： enter image description here

如何创建这种 div。因为这个 div 必须动态生成，因为他可能会调用另一个 Web 服务来生成其他一些字段或具有更多字段。

我的代码 sn-p :-

enter image description here

这样的 UI（只是标签不同，这里的标签是 dbname、profilename、username，因为这是我从 Data 接收到的） enter image description here

【问题讨论】：

你能分享代码吗？可能是你正在尝试创建的 UI 的屏幕截图？
您好，我已经添加了我的代码以及示例结构，它在 UI 中的外观。
你需要一些信息，比如它应该是什么类型的元素。您可以维护所有可能字段及其元素类型的映射，或者如果服务提供该信息，这将很容易。

标签： reactjs react-router react-redux reactive-programming

【解决方案1】：

基本上你可以在其他 JSX 元素中使用其他 JSX 元素的元素。

假设我们有一个 DatabaseList 组件：

import React from 'react';

const DatabaseList = ({ data }) => { // data is the json you got from the server (array of databases)
  const databases = data.map(db => <Database name={db.name} profilename={db.profilename} password={db.password} key={db.name} />);

  // databases is now an array of JSX-Elements. We can just return that array here to get it displayed. Don't forget to set the key to an unique value (e.g. database name)
  return <div>{databases}</div>;
}

export default DatabaseList;

当然还有数据库组件，它只是将名称等作为道具然后显示它。如果您想稍后更改数据，您需要为您的数据库组件实现类似 onChange 事件。

如果您需要有关如何编写数据库组件的帮助，请告诉我或分享您的代码以及您遇到的问题。

【讨论】：

@Pooja，您介意将代码粘贴为 sn-p。我们会更容易为您提供帮助。