Как «переопределить» функцию рендеринга?

Question

Я только начинаю с React. У меня есть проект, который включает в себя множество таблиц, некоторые довольно сложные, но все они обычно выводят таблицу из набора данных. Некоторые из них имеют отношения родитель-потомок (с toggleable дочерними строками), и каждый из них имеет немного другой формат для вывода строки (например, некоторые из них имеют кнопки, открывающие модальности). Обычно для этого я хотел бы использовать jQuery DataTables, что легко и гибко для чего-то подобного. Я изо всех сил пытаюсь понять, как сделать это устойчиво (масштабируемо?) В Реате.

Я написал базовый компонент таблицы, где он принимает набор элементов через реквизит и выплескивает таблицу и обрабатывает дочерние строки через внутреннее состояние. Сегодня я преобразую это, чтобы использовать два компонента: таблицу и отдельную для строк. Я действительно не хочу писать X или 2X разных компонентов (где X - количество таблиц в проекте), но я не уверен, как сделать его многоразовым. Все таблицы должны иметь некоторые общие черты, такие как стиль, возможность фильтрации, пейджинг и т. Д., Которые я бы постарался поставить на уровень компонента Table и повторно использовать.

Лучшее решение до сих пор, что я думал о выполнении проходит в preRender функции через реквизита и с помощью, чтобы создать фактическую строку JSX, и имеющий функцию render просто собрать все эти фрагменты в один выходной сигнал (который в основном то, что я уже, но с Array.map я мог бы обеспечить preRender через опору (если это работает), как это:.

var Table = React.createClass({ 
    render: function() { // mixin? 
     var rows = []; 
     for (var i=0; i<this.props.items.length; i++) { 
      rows.push(this.props.preRender(this.props.items[i])); 
     } 
     return rows; // plus html boilerplate... 
    } 
}); 

var Parent = React.createClass({ 
    render: function() { 
     var foodItems = this.state.foodItems; 
     var drinkItems = this.state.drinkItems; 
     var foodRender = function(i) { return (<tr>{i} <a href?>Buy me</a></tr>); } 
     var drinkRender = function(i) { return (<tr>{i} <button>Drink me</button></tr>); } 

     return (
      <Table items={foodItems} preRender={foodRender}/> 
      <Table items={drinkItems} preRender={drinkRender}/> 
     ); 
    } 
}); 

Другое дело, я думал как-то проходит в другом компоненте Роу к Компонент таблицы, если это возможно. Я думаю, что проблемы с корнем:

1. Материал на уровне стола очень похож или идентичен по столам, но может имеют части, нуждающиеся в настройке за столом.
2. Строки делают вещи как открытые popovers, поэтому у них будет состояние (или нужно обвести вокруг w/реквизит).

Есть ли лучший способ сделать такую ​​логику/зависимость, или мне, вероятно, просто нужно будет сделать тонну немного разных элементов управления.

Answer 1

Я хотел бы начать с чем-то вроде этого (с использованием синтаксиса ES6 для краткости):

const FoodItem = React.createClass({ 
    render() { 
    return (
     <tr><td>{this.props.item} <a href="something">Buy me</a></td></tr> 
    ); 
    } 
}); 


const DrinkItem = React.createClass({ 
    render() { 
    return (
     <tr><td>{this.props.item} <button>Drink me</button></td></tr> 
    ); 
    } 
}); 


const Table = React.createClass({ 
    render() { 
    const {items, itemComponent: ItemComponent} = this.props; 

    return (
     <table> 
     {items.map(item => <ItemComponent item={item} />)} 
     </table> 
    ); 
    } 
}); 


const Parent = React.createClass({ 
    render() { 
    return (
     <div> 
     <Table items={this.state.foodItems} itemComponent={FoodItem}/> 
     <Table items={this.state.drinkItems} itemComponent={DrinkItem}/> 
     </div> 
    ); 
    } 
}); 

Альтернативный шаблон будет это (что лучше всего зависит от ваших требований):

const FoodItem = React.createClass({ 
    render() { 
    return (
     <tr><td>{this.props.item} <a href="something">Buy me</a></td></tr> 
    ); 
    } 
}); 


const DrinkItem = React.createClass({ 
    render() { 
    return (
     <tr><td>{this.props.item} <button>Drink me</button></td></tr> 
    ); 
    } 
}); 


const Table = React.createClass({ 
    render() { 
    // I'm assuming you ultimately want your table to do something cleverer than just rendering a table element 
    return (
     <table>{this.props.children}</table> 
    ); 
    } 
}); 


const Parent = React.createClass({ 
    render() { 
    return (
     <div> 
     <Table>{this.state.foodItems.map(item => <FoodItem item={item} />)}</Table> 
     <Table>{this.state.drinkItems.map(item => <DrinkItem item={item} />)}</Table> 
     </div> 
    ); 
    } 
});