0

У меня есть библиотека стороннего разработчика, которая отдает компонент Table, состоящий из нескольких элементов. Высота одного из внутренних элементов, назовем его <div class='toChange'> из Table меня не устраивает. Я ее хочу задавать динамически из this.state.height. Можно ли как-то из родительского компонента MyComponent динамически менять высоту у <div class='toChange'>?

import { Table } from "someLibrary";

export default class MyComponent extends Component {
  ...
  render() {
    const y = this.state.height
    return <div>
      <Table />
    </div>
  }
}

1 ответ 1

0

Можно в несколько способов

  1. Ребенок должен "ловить" style и присваивать их на правильную DOM ветку
  2. Ребенок должен "ловить" className и где-то должен быть css, sass, scss файл который будет импортироваться со стилями для заданного класса
  3. Можно использовать styled-components которые хорошо работают с переданным className и в конечном результате комбинируют переданный класс с тем который они генерируют

Все три примера есть по ссылки ниже

Ссылка на пример на codesandbox

Примечание: если автор библиотеки не принимает style или className пропс, то у шансы на изменения стиля элемента у вас очень низки. Чтобы узнать точно вам нужно пойти в исходный код этой компоненты и посмотреть какие пропсы она принимает

UPDATE

class MyComponent {
  state = {
    height: 0,
  }

  setHeight = (height) => {
    this.setState({ height }, () => {
      // функция вызовется после обновления состояния

      // ловим DOM ветку где надо изменить стили
      const element = document.querySelector('targetClassName');

      // меняем стили только если она существует в DOM структуре
      if (element) element.style.height = `${height}px`;
    })
  }


  render() { ... }
}
7
  • Компонент чужой. Он высоту вычисляет сам где-то в своих внутренностях. Править его не хочу - т.к. усложнит поддержку всего проекта. Моя надежда на то, что можно как-то из родителя вмешиваться. Пока на ум приходит только в componentDidMount() через document.getElementsByClassName() искать и менять, но чувствую, что тут куча подводных камней.
    – PashkovDV
    Commented 7 апр. 2020 в 10:55
  • Если компонент чужой и не принимает вещи которые я описал выше, тогда вам нужно на обычном JS найти эту DOM-ветку и задать ей нужные вам стили
    – akiri
    Commented 7 апр. 2020 в 10:57
  • делать это в componentDidMount() родителя - насколько правильно?
    – PashkovDV
    Commented 7 апр. 2020 в 10:58
  • Если компонент чужой, но находится в кодовой базе к которой у вас есть доступ - добавление поддержки дополнительных props нисколько не повлияет на поддержку всего проекта. Если он никогда эти props не поддерживал, скорее всего никто их туда и не передавал/передает
    – akiri
    Commented 7 апр. 2020 в 10:59
  • componentDidMount подходит если высоту вам нужно поставить единожды когда DOM дерево посажено в документ. Если вам нужно будет задавать и изменять высоту реагируя на какие-то props то лучше это сделать в componentDidUpdate() при этом проверяя на изменения нужные пропсы
    – akiri
    Commented 7 апр. 2020 в 11:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.