从对象数组渲染 React 组件
[英] Rendering React Components from Array of Objects
本文介绍了从对象数组渲染 React 组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一些叫做站的数据,它是一个包含对象的数组.
站:[{呼叫:'第一站',频率:'000'},{呼叫:'第二站',频率:'001'}]
我想为每个数组位置渲染一个 ui 组件.到目前为止我可以写
varstationsArr = []for (var i = 0; i < this.data.stations.length; i++) {车站Arr.push(<div className="站">{this.data}
)}
然后渲染
render(){返回 ({stationsArr})}
问题是我正在打印所有数据.我只想显示一个像 {this.data.call}
这样的键,但它什么也不打印.
如何遍历这些数据并为数组的每个位置返回一个新的 UI 元素?
解决方案
您可以将站点列表映射到 ReactElements.
使用 React >= 16,可以从同一个组件返回多个元素,而无需额外的 html 元素包装器.从 16.2 开始,有一个 新语法 <> 创建片段.如果这不起作用或您的 IDE 不支持,您可以使用
代替.在 16.0 和 16.2 之间,您可以对片段使用非常简单的polyfill.
试试下面的方法
//现代语法 >= React 16.2.0const 测试 = ({站}) =>(<>{stations.map(station => (<div key={station.call} className='station'>{station.call}</div>))}</>);//现代语法 <反应 16.2.0//你需要在这里包装一个额外的元素,比如 divconst 测试 = ({站}) =>(<div>{stations.map(station => (<div className="车站"key={station.call}>{station.call}
))}
);//旧语法var 测试 = React.createClass({渲染:函数(){var stationComponents = this.props.stations.map(function(station) {return
{station.call}
;});返回 <div>{stationComponents}</div>;}});var 站 = [{呼叫:'第一站',频率:'000'},{呼叫:'第二站',频率:'001'}];ReactDOM.render(<div><测试站={站}/>
,document.getElementById('容器'));
不要忘记 key
属性!
https://jsfiddle.net/69z2wepo/14377/
I have some data called stations which is an array containing objects.
stations : [
{call:'station one',frequency:'000'},
{call:'station two',frequency:'001'}
]
I'd like to render a ui component for each array position. So far I can write
var stationsArr = []
for (var i = 0; i < this.data.stations.length; i++) {
stationsArr.push(
<div className="station">
{this.data}
</div>
)
}
And then render
render(){
return (
{stationsArr}
)
}
The problem is I'm getting all of the data printing out. I instead want to just show a key like {this.data.call}
but that prints nothing.
How can I loop through this data and return a new UI element for each position of the array?
解决方案
You can map the list of stations to ReactElements.
With React >= 16, it is possible to return multiple elements from the same component without needing an extra html element wrapper. Since 16.2, there is a new syntax <> to create fragments. If this does not work or is not supported by your IDE, you can use <React.Fragment>
instead. Between 16.0 and 16.2, you can use a very simple polyfill for fragments.
Try the following
// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
<>
{stations.map(station => (
<div key={station.call} className='station'>{station.call}</div>
))}
</>
);
// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here
const Test = ({stations}) => (
<div>
{stations.map(station => (
<div className="station" key={station.call}>{station.call}</div>
))}
</div>
);
// old syntax
var Test = React.createClass({
render: function() {
var stationComponents = this.props.stations.map(function(station) {
return <div className="station" key={station.call}>{station.call}</div>;
});
return <div>{stationComponents}</div>;
}
});
var stations = [
{call:'station one',frequency:'000'},
{call:'station two',frequency:'001'}
];
ReactDOM.render(
<div>
<Test stations={stations} />
</div>,
document.getElementById('container')
);
Don't forget the key
attribute!
https://jsfiddle.net/69z2wepo/14377/
这篇关于从对象数组渲染 React 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!