Как отобразить доступ к переменным состояния внутри карты l oop в виде горизонтальных вкладок в React- Bootstrap? - PullRequest
Новая
       10

Как отобразить доступ к переменным состояния внутри карты l oop в виде горизонтальных вкладок в React- Bootstrap?

0 голосов
/ 01 февраля 2020

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

 render() {
if (!this.state.customerList)
  return (<p>Loading data</p>)
return (<div className="addmargin">
  <div className="row">
    {
    this.state.customerList.data.map((customer) => (
      <Tabs activeKey={this.state.activeTab} onSelect={this.handleSelect} className="centeralign"
      onClick={() => this.setState({selectedCustomer: customer.id})}>
      <Tab eventKey={customer.id} title={customer.name}></Tab>
      </Tabs>
    ))
    }
</div>
  <div className="col-md-6">
    <CustomerDetails val={this.state.selectedCustomer}/>
  </div>
</div>

Вывод: Вертикальный столбец с моими 3 переменными

Вероятно, с моим css проблем нет. Если бы я жестко запрограммировал, 

  render() {
if (!this.state.customerList)
  return (<p>Loading data</p>)
return (<div className="addmargin">
  <div className="row">
    {

      <Tabs activeKey={this.state.activeTab} className="centeralign">
      <Tab eventKey="1" title="John"> </Tab>
      <Tab eventKey="2" title="William"> </Tab>
      <Tab eventKey="3" title="Harry"> </Tab>
      </Tabs>

Тогда вывод будет 3 горизонтальных табуляции

1 Ответ

0 голосов
/ 04 февраля 2020

Попробуйте это 


render() {
if (!this.state.customerList)
  return (<p>Loading data</p>)
return (
<div className="addmargin">
    <div className="row">
       <Tabs activeKey={this.state.activeTab} onSelect={this.handleSelect} 
        className="centeralign">
        {
        this.state.customerList.data.map((customer) => (
             return <Tab eventKey={customer.id} title={customer.name}></Tab>
        ))
        }
        </Tabs>
    </div>
</div>)

Проблема в том, что вы используете функцию карты для вкладок, но вкладки должны быть вне функции карты, а карта должна возвращать отдельные компоненты вкладок.

...