Как получить доступ к стилям из React?

Я пытаюсь получить доступ к стилям ширины и высоты div в React, но я столкнулся с одной проблемой. Это то, что я получил до сих пор:

componentDidMount()  {
  console.log(this.refs.container.style);     
}


render()  {
   return (
      <div ref={"container"} className={"container"}></div>  //set reff
   );
}

Это работает, но вывод, который я получаю, является объектом CSSStyleDeclaration, и во всем свойстве я могу использовать все селектора CSS для этого объекта, но ни один из них не установлен. Все они заданы пустой строкой.

Это результат CSSStyleDecleration: http://pastebin.com/wXRPxz5p

Любая помощь по просмотру фактических стилей (неотвратимых событий) будет принята с благодарностью!

Спасибо!

Ответ 1

Для Реакции v <= 15

console.log( ReactDOM.findDOMNode(this.refs.container).style); //React v > 0.14

console.log( React.findDOMNode(this.refs.container).style);//React v <= 0.13.3

РЕДАКТИРОВАТЬ:

Для получения определенного значения стиля

console.log(window.getComputedStyle(ReactDOM.findDOMNode(this.refs.container)).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes;

Для React v> = 16

присвойте ref, используя стиль обратного вызова или используя createRef().

assignRef = element => {
  this.container = element;
}
getStyle = () => {

  const styles = this.container.style;
  console.log(styles);
  // for getting computed styles
  const computed = window.getComputedStyle(this.container).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes;
  console.log(computed);
}

Ответ 2

Стоит отметить, что хотя ReactDOM.findDOMNode можно использовать сегодня, в будущем он будет устаревшим вместо ссылок на обратные вызовы.

Существует пост здесь Дэн Абрамовым, который описывает причину не использовать findDOMNode, обеспечивая примеры того, как заменить использование ReactDOM.findDOMNode с обратным вызовом рефами.

Поскольку я видел, как пользователи SO расстраивались, когда в ответ была включена только ссылка, поэтому я приведу один из примеров, которые Дэн любезно предоставил:

findDOMNode (stringDOMRef)

**Before:**

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this.refs.something).scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref='something' />
      </div>
    )
  }
}
**After:**

class MyComponent extends Component {
  componentDidMount() {
    this.something.scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref={node => this.something = node} />
      </div>
    )
  }
}

Ответ 3

Вам следует использовать метод ReactDOM.findDOMNode и работать оттуда. Вот код, который делает то, что вам нужно.

var Hello = React.createClass({

componentDidMount: function() {
  var elem = ReactDOM.findDOMNode(this.refs.container);
  console.log(elem.offsetWidth, elem.offsetHeight);    
},

render: function() {
   return (
      <div ref={"container"} className={"container"}>
        Hello world
      </div>
   );
}
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

jsFiddle

Ответ 4

У вас уже есть стиль, причина, по которой реквизиты объектов CSSStyleDeclaration имеют столько пустого строкового значения, что это ссылка на внутренний стиль.

Посмотрите, что произойдет, если вы внесете изменения, как показано ниже:

<div ref={"container"} className={"container"} style={{ width: 100 }}></div>

Ответ 5

Вот пример вычисления значения свойства CSS с помощью React .getComputedStyle метода .getComputedStyle:

class App extends React.Component {
    constructor(props) {
        super(props)
        this.divRef = React.createRef()
    }

    componentDidMount() {
        const styles = getComputedStyle(this.divRef.current)

        console.log(styles.color) // rgb(0, 0, 0)
        console.log(styles.width) // 976px
    }

    render() {
        return <div ref={this.divRef}>Some Text</div>
    }
}