使用ReactJS显示多维数组

Question

刚刚开始使用ReactJS,我正在寻找最有效的代码来在表格结构中显示下面的数组,如'render'部分所述.我一直在使用.map来遍历用户/按钮对象,但还没有成功.

在我下面的代码示例中,我想获取userData数组并以单独的行(html表格式)显示内容即ie.

Joe,Smith,[Click 1A],[Click2B] //'Click XX'是按钮

Mary,Murphy,[点击2A],[Click2B]

我怎样才能做到这一点？

谢谢

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>
    )
  }
});

Answer 1

userData如果可能,我建议你简化你的..你有很多额外的嵌套数组,似乎不需要.

像这样的东西:

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
            }
        ]
    }
];

然后很容易循环并返回正确的元素:

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>
)