RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 573587
Accepted
Pavel Perevezencev
Pavel Perevezencev
Asked:2020-10-04 19:20:22 +0000 UTC2020-10-04 19:20:22 +0000 UTC 2020-10-04 19:20:22 +0000 UTC

具有嵌套行的表

  • 772

有一个表格,其中呈现产品组:

产品组

当您单击一行时,应向其添加更多行(组打开),如下所示:

在此处输入图像描述

(点击蓝线呈现 2 条红线)

我正在尝试这样做:

import React from "react";

class App extends React.Component {
    renderGroups(groups) {
        return groups.map(({ group: { name } }, index) => (
            <tr key={index} className="group" onClick={this.onGroupToggle}>
                <td>{name}</td>
                <td>g-1.1</td>
                <td>g-1.2</td>
                <td>g-1.3</td>
                <td>g-1.4</td>
                <td>g-1.5</td>
            </tr>
        ));
    }

    renderProducts(products) {
        return products.map(({ name }) => (
            <tr key={index} className="product">
                <td>{name}</td>
                <td>g-1.1</td>
                <td>g-1.2</td>
                <td>g-1.3</td>
                <td>g-1.4</td>
                <td>g-1.5</td>
            </tr>
        ));
    }

    onGroupToggle() {
        console.log("onGroupToggle");
        // какие то непонятные действия
        // которые должны привести к инжекту tr.product после tr.group
    }

    render() {
        const groups = [
            {
                group: {
                    group_id: 1,
                    name: 'Телефоны'
                },
                products: [
                    {
                        product_id: 1,
                        name: 'iPhone 7'
                    }, {
                        product_id: 1,
                        name: 'iPhone 7 Plus'
                    }
                ]
            }
        ];

        return (
            <table border="1">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                    </tr>
                </thead>
                <tbody>
                {this.renderGroups(groups)}
                </tbody>
            </table>
        );
    }
}

App.propTypes = {
  example: React.PropTypes.object
};

export default App;

如何在 React 中正确实现它,因为我无法在 renderGroups 中返回 2 tr。

renderProducts(products) {
    return products.map(({ name }) => (
        <tr key={index} className="group">
            <td>{name}</td>
            <td>g-1.1</td>
            <td>g-1.2</td>
            <td>g-1.3</td>
            <td>g-1.4</td>
            <td>g-1.5</td>
        </tr>
        <tr key={index} className="product">
            <td>{name}</td>
            <td>g-1.1</td>
            <td>g-1.2</td>
            <td>g-1.3</td>
            <td>g-1.4</td>
            <td>g-1.5</td>
        </tr>
        <tr key={index} className="product">
            <td>{name}</td>
            <td>g-1.1</td>
            <td>g-1.2</td>
            <td>g-1.3</td>
            <td>g-1.4</td>
            <td>g-1.5</td>
        </tr>
    ));
}

怎么做才对?

更新

示例:有一个 Tables 组件接受一个 TableRows 组件作为道具,该组件呈现表格中的所有行(在该组件内,我用 tbody 中的组名称和产品行包装一个字符串),但是如果该组件返回几个“ tbody" fidl自然会返回一个错误

TableRows.render():必须返回一个有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象。

javascript
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Утка Учится Укрываться
    2020-10-04T19:25:12Z2020-10-04T19:25:12Z

    当您需要返回多个表行时,此限制的标准 hack 是将这些行包装起来tbody并从渲染中返回此包装器。tbody表中可以有多个,结构不会有太大变化。

    像这样的东西:

    renderMultipleRows(){
        return <tbody>
                   <tr></tr>
                   <tr></tr>
               </tbody>
    }
    

    您还可以从函数返回一个 jsx 节点数组(但不是反应组件的渲染方法!)在这种情况下,值得根据节点的语义为每个节点分配一个键,否则反应会发出警告。

    const AwesomeComponent = React.createClass({
        renderRows: function(){
            return [
                <tr key="smth"></tr>,
                <tr key="smthelse"></tr>
            ]
        },
    
        render: function(){
            return <tbody>{this.renderRows()}</tbody>
        }
    });
    
    • 1

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何停止编写糟糕的代码?

    • 3 个回答
  • Marko Smith

    onCreateView 方法重构

    • 1 个回答
  • Marko Smith

    通用还是非通用

    • 2 个回答
  • Marko Smith

    如何访问 jQuery 中的列

    • 1 个回答
  • Marko Smith

    *.tga 文件的组重命名(3620 个)

    • 1 个回答
  • Marko Smith

    内存分配列表C#

    • 1 个回答
  • Marko Smith

    常规赛适度贪婪

    • 1 个回答
  • Marko Smith

    如何制作自己的自动完成/自动更正?

    • 1 个回答
  • Marko Smith

    选择斐波那契数列

    • 2 个回答
  • Marko Smith

    所有 API 版本中的通用权限代码

    • 2 个回答
  • Martin Hope
    jfs *(星号)和 ** 双星号在 Python 中是什么意思? 2020-11-23 05:07:40 +0000 UTC
  • Martin Hope
    hwak 哪个孩子调用了父母的静态方法?还是不可能完成的任务? 2020-11-18 16:30:55 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    user207618 Codegolf——组合选择算法的实现 2020-10-23 18:46:29 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    Arch ArrayList 与 LinkedList 的区别? 2020-09-20 02:42:49 +0000 UTC
  • Martin Hope
    iluxa1810 哪个更正确使用:if () 或 try-catch? 2020-08-23 18:56:13 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5