Render N Tables - ReactJS, следующая таблица зависит от предыдущей таблицы - PullRequest
Новая
       20

Render N Tables - ReactJS, следующая таблица зависит от предыдущей таблицы

0 голосов
/ 06 августа 2020

Есть ли способ отрисовать N таблиц, мне нужно отрендерить таблицу на основе выбора на основе предыдущей таблицы. Я могу go до 3 таблиц, потому что всегда будет как минимум 3 таблицы, но после 3, вопрос не в том, какие данные таблицы отображать, а в том, есть ли даже таблица для фактического рендеринга. В настоящее время я создаю первые 3 таблицы следующим образом: 

render(){
    return(
         <div>
             {this.state.renderTable1 ? (this.renderTable1Data()):(<div></div>)}
             {this.state.renderTable2 ? (this.renderTable2Data()):(<div></div>)}
             {this.state.renderTable3 ? (this.renderTable3Data()):(<div></div>)}
         </div>
    )
}

есть ли способ сделать это динамически опубликовать третий выбор? Я новичок в реагировании и все еще учусь, и везде, где я ищу динамически создаваемые таблицы, это связано с созданием данных таблицы, а не с тем, нужно ли мне создавать саму таблицу. Любая помощь будет принята с благодарностью. Или, если я что-то пропустил при просмотре

Спасибо.

1 Ответ

0 голосов
/ 06 августа 2020

Вы имеете в виду, что хотите установить состояние на [true, true, false] и отображать таблицы на основе этого состояния? если это так, вы можете сделать что-то вроде этого: 

constructor(){
  this.state = {renderTables: [true, true, false]}
}
renderTableData(index){
  // render table with index : index
}
render(){
    return(
         <div>
         {this.state.renderTables.map((renderTable, index) => (
             renderTable ? (this.renderTableData(index)) : null
         )}
         </div>
     )
}

вы также можете сделать это (рендеринг до таблицы) более автоматически, например: 

let {renderTables} = this.state;
let break = false
renderTables.map((renderTable, index) => {
  if(break) return null;
  let prevRenderTable = index > 0 ? renderTables[index - 1] : true
  if (!prevRenderTable) break = true
  return (prevRenderTable ? this.renderTableData(index) : null)
})
...