使用 ReactJS 显示多维数组

Posted 2023-02-22

【中文标题】使用 ReactJS 显示多维数组

【英文标题】：Displaying multi dimensional array with ReactJS

【发布时间】：2015-06-21 22:15:51

【问题描述】：

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

在下面的代码示例中，我想获取 userData 数组并将内容显示在单独的行中（html 表格格式）即。

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

玛丽，墨菲，[点击 2A]，[点击 2B]

我怎样才能做到这一点？

谢谢

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

【参考方案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>
)

【讨论】：

感谢奥斯汀的回复。清理数据并使其全部正常工作。感谢帮助。 :)

【参考方案2】：

类似以下的方法可能会起作用：

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

我假设您可以从 react-bootstrap 之类的工具中获取 Button。

【讨论】：

感谢 edoloughlin。在您的回答和 Austins 之间，现在一切正常！你们摇滚！