3

Есть таблица, в ней рендерятся группы товаров:

Группы товаров

При клике на строку в ней должно добавляться еще несколько строк (раскрывается группа), вот так:

введите сюда описание изображения

(при клике на синюю строку отрендерилось еще 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>
    ));
}

Как правильно это сделать?

UPDATE

Пример: есть компонент Tables который принимает в качестве props'а компонент TableRows который рендерит все строки в таблице (внутри этого компонента я оборачиваю в tbody строку с названием группы и строки продуктов) но если этот компонет возвращает несколько "tbody" фидл естествено возвращает ошибку

TableRows.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

1 ответ 1

1

Стандартный хак этого ограничения для случая когда нужно возвращать несколько строк таблицы - обернуть эти строки в tbody и вернуть из render эту обертку. tbody в таблице может быть несколько и структура не будет сильно изменена.

Вроде того:

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

Также можно вернуть из функции (но не метода render реакт компонента!) массив jsx узлов. В этом случае стоит назначить каждому узлу key исходя из семантики узлов, иначе реакт будет плеваться ворнингами.

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

    render: function(){
        return <tbody>{this.renderRows()}</tbody>
    }
});
5
  • А если все строки вынесены в отдельный компонент например TableRows опять же получается что компонент должен возвращать массив элементов, как уйти от этого? 5 окт 2016 в 17:48
  • @Павел, я не понял как ваша ситуация отличается от того что я описал. Пример приведите. Вообще в целом, нужно помнить что jsx в javascript по прозрачным правилам компилится. И само это ограничение возврата одной ноды из рендера - оно из js происходит, обойти втупую пока нельзя. Думайте о jsx компоненте как о вызове функции и все станет понятнее. 5 окт 2016 в 17:57
  • Хорошая новость в том, что это ограничение не очень-то ограничивающее. Мне приходит в голову два случая где это реально полезно: 1. строки таблицы как здесь спокойно оборачиваются в tbody, 2. хитрые перестановки дочерних элементов контейнера, решается черзе keyed fragment: facebook.github.io/react/docs/create-fragment.html 5 окт 2016 в 18:01
  • Добавил пример к коментарию 5 окт 2016 в 18:35
  • @Павел если проблема - вернуть несколько элементов не из метода render реакт компонента, а просто из какой-то функции внутри компонента, то проблемы собственно нет. Массив элементов возвращаете, jsx поймет. Дополнил. 5 окт 2016 в 19:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.