Есть таблица, в ней рендерятся группы товаров:
При клике на строку в ней должно добавляться еще несколько строк (раскрывается группа), вот так:
(при клике на синюю строку отрендерилось еще 2 красных строки)
Пытаюсь это сделать так:
import React from "react";
class App extends React.Component {
renderGroups(groups) {
return groups.map(({ group: { name } }, index) => (
{name}
g-1.1
g-1.2
g-1.3
g-1.4
g-1.5
));
}
renderProducts(products) {
return products.map(({ name }) => (
{name}
g-1.1
g-1.2
g-1.3
g-1.4
g-1.5
));
}
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 (
name | 1 | 2 | 3 | 4 | 5 |
---|
App.propTypes = { example: React.PropTypes.object };
export default App;
Как это правильно реализовать на React, ведь я не могу внутри renderGroups возвращать 2 tr.
renderProducts(products) { return products.map(({ name }) => ( {name} g-1.1 g-1.2 g-1.3 g-1.4 g-1.5 {name} g-1.1 g-1.2 g-1.3 g-1.4 g-1.5 {name} g-1.1 g-1.2 g-1.3 g-1.4 g-1.5 )); }
Как правильно это сделать?
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.
Ответ
Стандартный хак этого ограничения для случая когда нужно возвращать несколько строк таблицы - обернуть эти строки в tbody и вернуть из render эту обертку. tbody в таблице может быть несколько и структура не будет сильно изменена.
Вроде того:
renderMultipleRows(){
return
}
Также можно вернуть из функции (но не метода render реакт компонента!) массив jsx узлов. В этом случае стоит назначить каждому узлу key исходя из семантики узлов, иначе реакт будет плеваться ворнингами.
const AwesomeComponent = React.createClass({
renderRows: function(){
return [
,
]
},
render: function(){
return {this.renderRows()}
}
});
Комментариев нет:
Отправить комментарий