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

Question

Я не могу применить атрибут стиля к заголовку столбца таблицы.Мои заголовки формируются динамически, как массив объектов.

        tableTh = [
          {name: '', style:{width: '50px'}, isCheckbox: true},
          {name: i18n.t('ExtendedModalBar.naming'), style:{}},
          {name: i18n.t('ExtendedModalBar.profile'), style:{width: '200px'}},
          {name: i18n.t('ExtendedModalBar.security'), style:{textAlign: 'center', width: '100px'}},
          {name: i18n.t('ExtendedModalBar.manager'), style:{textAlign: 'center', width: '100px'}}
        ];

Функция рендеринга из компонента TableHeader:

    render(){
     ...

     <th
                    className={header.id ? 'table__header-item' : ''}
                    id={index}
                    key={`tableHeader_${header.id}_${random(1, 100)}`}
                    ref={node => {this.thRef = node;}}
                    onClick={() => this.sortColumn(header)}
                    // onMouseDown={(e) => this.handleMouseDown(e)}
                    // onMouseUp={(e) => this.handleMouseUp(e)}
                    // onMouseMove={(e) => this.handleMouseMove(e)}
                    onMouseOver={(e) => this.handleMouseOver(e)}
                    style={{whiteSpace: 'nowrap', ...this.props.style}}
                  >
        ...
}

Я пытаюсь применить некоторые методы массива, например, фильтр карты и т. Д., Но ни один из них не работает.Пожалуйста, помогите мне.Большое спасибо заранее!

<TableHeader
              headers={tableTh}
              onChange={() => this.selectAll()}
              checked={this.state.selectedAll}
              //thCheckbox={{width: '50px'}}
              //key={index.toString()}
              style={tableTh.filter((obj, index, tableTh) => tableTh[index].style)} // don't work
            />

Answer 1

Основываясь на ваших данных, я полагаю, каждый <th> имеет свой стиль.Но то, что вы делаете, это применяете тот же стиль.

Пожалуйста, обновите реквизиты стиля для рендера заголовка

  this.props.headers.map((header, index) => {

    return (
      <th
        ...
        style={header.style}>

В вашем <TableHeader> вам не нужно проходить style опоры вниз.Это уже с вашими tableTh данными