在ReactJs中渲染对象数组
我试图通过对象属性（此示例的名称）并在函数的轻松循环中列出它们。我发现这样做有些尴尬，但这似乎不正确。
这是我得到的：
const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const a = props.numbers;
return (
<ul>
{a.map((number) =>
<ListItem value={ItemsToSell[number].Name} />
)}
</ul>
);
}
const numbers = [0,1, 2];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
有一个更好的方法吗？我只需要一个循环即可遍历对象数组，列出所需的属性并创建许多html节点之一。
问题答案：
您可以简单地在ItemsToSell数组上 映射
const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
return (
<ul>
{ItemsToSell.map((obj, index) =>
<ListItem key={index} value={obj.Name} />
)}
</ul>
);
}
ReactDOM.render(
<NumberList />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
-
问题内容： 我有以下组成部分： article_list.jsx 尽管JSON请求工作正常，并且返回了包含五个JSON对象的数组，但它们只是不呈现！ 我是ReactJS的新手，并且阅读（并观看了）很多教程，但是似乎我缺少一些东西。 有什么建议？ 问题答案： forEach中的return语句不返回值，而是像语句一样，您需要使用map 否则，如果要使用forEach，则需要修改代码，例如
-
问题内容： 你能告诉我如何在react js中渲染列表吗？我喜欢这样 问题答案： 您可以通过两种方式进行操作： 第一： 第二： 直接在返回中编写map函数
-
问题内容： 我映射了多个对象。 我如何嵌套一个循环，以便首先遍历对象，然后遍历（在此示例中）城市？谢谢！ 我的没有嵌套外观的渲染函数如下所示： 城市对象示例： 问题答案： 您可以使用嵌套映射来映射内部子对象以及
-
问题内容： 我正在尝试使用和JSX 渲染具有重音符号的元素，但它没有返回我想要的东西。 我的JSX： 我呈现的JavaScript： 我在浏览器中的结果： 我已经在标签内的索引文件中进行了设置，如果直接在页面内容中键入该单词，则重音字符将在页面标题和正文中起作用，但是在由 我该如何解决这个问题？ 问题答案： 您所看到的是由于UTF-8字节数组以ASCII呈现的结果，可能是代码页ISO 8859-1
-
问题内容： 快速提问。我正在学习React JS。 创建组件时，我们在render函数中提供要渲染的组件的html模板。到目前为止，我只看到带有很少部分html的小型组件，但是我只是想知道如果我们的组件带有巨大的html模板会发生什么情况，有没有办法提供指向单独的html文件的路径？还是我们被迫直接在render函数中编写所有html？谢谢！ 问题答案： 您应该始终将其编写在render函数中。您
-
问题内容： 我有一些称为站的数据，它是一个包含对象的数组。 我想为每个数组位置渲染一个ui组件。到目前为止，我可以写 然后渲染 问题是我要打印所有数据。相反，我只想显示一个像这样的键，但是什么也不打印。 如何遍历此数据并为数组的每个位置返回一个新的UI元素？ 问题答案： 您可以将工作站列表映射到ReactElements。 使用React> = 16时，可以从同一组件返回多个元素，而无需额外的ht