Question

我很反应..如果有人可以帮助我。

我已收到来自json格式的web服务的数据并且已经在数组中。所以收到的数据如下： enter image description here 现在我想要的是它应该创建一个屏幕： enter image description here

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

我的代码段： -

enter image description here

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

Answer 1

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

让我们想象一下我们有一个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事件的内容。

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

如何在reactjs中动态地向div添加元素

1 个答案: