Блог

Главная - Вопросы по программированию - Любой правильный/чистый способ обработки большого количества случаев if..then в таблице react?

Любой правильный/чистый способ обработки большого количества случаев if..then в таблице react?

#reactjs

Вопрос:

у меня есть большой выпадающий список(100-кратный ключевой элемент)…и в каждом раскрывающемся списке будет отображаться другая таблица(тип 100x),
так что мой код хотел бы:

 const typeA =[
  {
    Header: "Gender",
    accessor: "_source.aa",
    className: "t-cell-1 text-left"
  },
  {
    Header: "Age",
    className: "t-cell-1 text-left",
    accessor: "lastRecord.bb"
  }
]
const typeA1 =[
  {
    Header: "Firstname",
    accessor: "_source.firstname",
    className: "t-cell-1 text-left"
  },
  {
    Header: "Lastname",
    className: "t-cell-1 text-left",
    accessor: "lastRecord.lastname"
  }
]
const typeA100 =[
  {
    Header: "Height",
    accessor: "_source.height",
    className: "t-cell-1 text-left"
  },
  {
    Header: "Weight",
    className: "t-cell-1 text-left",
    accessor: "lastRecord.weight"
  }
]

И в части рендеринга я делаю это так

   return (
    <Styles>
:isTypeA1? <Table columns={TypeA1} data={data} /> 
:isTypeA2? <Table columns={TypeA2} data={data} />       
...
:isTypeA100? <Table columns={TypeA100} data={data} />       

    </Styles>
  )
}

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

Обновлено 20210813 компонент, который я использую сейчас, является флажком, и позже он изменится на выпадающий, в то время как код флажка такой:

  constructor(props) {
    super(props);
    this.state = {
     
      isTypeA1: false,
    };
  }
  toggleCheck = () => {
    this.setState({
      isTypeA1: !this.state.isTypeA1,
    });
  }


   <div>
                  <input
                  type="checkbox"
                  name="myCheckBox1" 
                  checked={this.state.isTypeA1}
                  onClick={this.toggleCheck}
                  
                  />
                 testing chk box</div>

Спасибо
Джефф

Комментарии:

1. Откуда берется isTypeA1? typeA1 и т. Д. Должны быть ключами для объекта.

2. не могли бы вы отредактировать код, чтобы показать полный компонент? Нужно знать, откуда берутся isTypeA1 и все остальные

3. у меня есть фрагмент кода в редактировании, спасибо .

Ответ №1:

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

Один из распространенных шаблонов в вашем случае-сделать renderTable или какое-либо другое имя, которое кажется подходящим, И сделать случай переключения, например:

 const Home = ({ data, type }) => {

  const renderTable= (item) => {
    switch(type) {
      case 'A1':
        return <Table columns={TypeA1} data={data} />;
      case 'A2':
        return <Table columns={TypeA2} data={data} />;
      default:
        return null;
    }
  }

  return (
    <div className="container">
      {renderTable()}
    </div>
  )
}

Но это будет просто вариант в зависимости от вашего варианта использования, так что не стесняйтесь редактировать то, что вы считаете лучшим.

Метки: