javascript 使用 ReactJS 显示多维数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29658930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying multi dimensional array with ReactJS
提问by pgfitzpatrick
Just started with ReactJS and I'm looking for the most efficient code to display the array below in a table structure as described in the 'render' section. I have been using .map to iterate through the users/buttons objects, but with no success yet.
刚开始使用 ReactJS，我正在寻找最有效的代码来在“渲染”部分中描述的表结构中显示下面的数组。我一直在使用 .map 遍历用户/按钮对象，但还没有成功。
In my code sample below, I want to take the userData array and display the content in separate rows (html table format)ie.
在下面的代码示例中，我想获取 userData 数组并在单独的行（html 表格式）中显示内容，即。
Joe,Smith,[Click 1A],[Click2B] //'Click XX' are buttons
Joe,Smith,[Click 1A],[Click2B] //'Click XX'是按钮
Mary,Murphy,[Click 2A],[Click2B]
玛丽，墨菲，[点击 2A]，[点击 2B]
How can I achieve this?
我怎样才能做到这一点？
Thanks
谢谢
var MyButton = require('./mybutton.js');
var userData =[{
userButtons: [
[{user: [{ id: 1, lastName: 'Smith', firstName: 'Joe',
buttons: [
{button:[{ id:0, value: "Click 1A" enabled:1}]},
{button:[{ id:1, value: "Click 1B" enabled:1}]}
]
}]}],
[{user: [{ id: 1, lastName: 'Murphy', firstName: 'Mary',
buttons: [
{button:[{ id:0, value: "Click 2A" enabled:1}]},
{button:[{ id:1, value: "Click 2B" enabled:1}]}
]
}]
}]
]}];
var DisplayData = React.createClass({
render: function() {
// render userButtons in a table with data using <MyButton> ie.
// <table>
// <tr><td>Joe</td><td>Smith</td><td>[Click 1A]</td><td>[Click 2A]</td</tr>
// <tr><td>Mary</td><td>Murphy</td><td>[Click 2B]</td><td>[Click 2B]</td></tr>
// </table>
}
}
});
React.render(
<DisplayData tArr = {userData} />
, document.getElementById('content')
);
// mybutton.js
var React = require('react');
module.exports = React.createClass({
render: function() {
return (
<button>{this.props.value}</button>
)
}
});
回答by Austin Greco
I would suggest you simplify your userDataif possible.. you have quite a bit of extra nested arrays that don't seem to be needed.
userData如果可能的话，我建议你简化你的......你有很多似乎不需要的额外嵌套数组。
Something like this:
像这样的东西：
var userButtons = [
{
id: 1,
lastName: 'Smith',
firstName: 'Joe',
buttons: [
{
id: 0,
value: "Click 1A",
enabled: 1
}, {
id: 1,
value: "Click 1B",
enabled: 1
}
]
},
{
id: 2,
lastName: 'Murphy',
firstName: 'Mary',
buttons: [
{
id: 0,
value: "Click 2A",
enabled: 1
}, {
id: 1,
value: "Click 2B",
enabled: 1
}
]
}
];
Then it's easy to loop through and return the right elements:
然后很容易循环并返回正确的元素：
return (
<table>
{
userButtons.map(function(ub) {
var buttons = ub.buttons.map(function(button) {
return (
<td>{button.value}</td>
)
});
return (
<tr>
<td>{ub.firstName}</td>
<td>{ub.lastName}</td>
{buttons}
</tr>
)
})
}
</table>
)
回答by edoloughlin
Something like the following might work:
像下面这样的东西可能会起作用：
handleClick: function(id, value) {
// do something
},
render: function() {
var rows = userData.userButtons.map(
function(u) {
var buttons = u.buttons.map(
function(b) {
return <Button onClick={function() { this.handleClick(b.id, b.value)}.bind(this);}
enabled={b.enabled===1}>
{b.value}
</Button>;
});
return <tr>
<td>{u.firstName}</td>
<td>{u.lastName}</td>
{buttons}
</tr>;
});
return <table>{rows}</table>;
}
Where I assume you can get Button from something like react-bootstrap.
我假设您可以从 react-bootstrap 之类的东西中获取 Button。
