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

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

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


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

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

это выход CSSStyleDecleration является: http://pastebin.com/wXRPxz5p

любая помощь по получению, чтобы увидеть фактические стили (событие inherrited) были бы очень признательны!

спасибо!

7
attributes css javascript reactjs

4 ответов

этого

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

EDIT:

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

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

вы должны использовать 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

2

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

после здесь дан Абрамов, который излагает причины не использовать findDOMNode, предоставляя примеры того, как заменить использование ReactDOM.findDOMNode с обратным вызовом refs.

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

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>
    )
  }
}
1

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

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

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

0