findDOMNode（stringDOMRef）

Question

我试图在React中访问div的宽度和高度样式，但我遇到了一个问题。这是我到目前为止所得到的：

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

任何有关查看实际样式（事件继承的样式）的帮助都将非常感谢！

谢谢！

Answer 1

对于React v＆lt; = 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＆gt; = 16

使用回调样式或使用createRef（）指定ref。

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

Answer 2

您应该使用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

Answer 3

值得注意的是，虽然今天ReactDOM.findDOMNode可用，但将来会弃用它来代替回调引用。

Dan Abramov发布了一篇帖子here，其中概述了不使用findDOMNode的原因，同时提供了如何将ReactDOM.findDOMNode替换为回调引用的示例。

由于我已经看到SO用户在答案中只包含一个链接时感到不安，所以我将传递Dan所提供的其中一个例子：

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

Answer 4

你已经得到了风格，CSSStyleDeclaration对象的道具有这么多空字符串值的原因是它与内部风格的链接。

如果您进行如下更改，将会发生什么：

import java.util.Collections; import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class HierarchicalMap { private String key; private String descriptor; private Map<String,HierarchicalMap>values=new HashMap<String,HierarchicalMap>(); public String getKey() { return key; } public void setKey(String key) { this.key = key; } public void addToSubMap(String key, HierarchicalMap subMap) { values.put(key, subMap); } public String getDescriptor() { return descriptor; } public void setDescriptor(String descriptor) { this.descriptor = descriptor; } public HierarchicalMap getFromSubMap(String key) { return values.get(key); } public Map<String,HierarchicalMap> getUnmodifiableSubMap() { return Collections.unmodifiableMap(values); } public String toString() { StringBuffer sb = new StringBuffer(); sb.append("HierarchicalMap: "); sb.append(key); sb.append(" | "); sb.append(descriptor); Iterator<String> itr=values.keySet().iterator(); while(itr.hasNext()) { String key= itr.next(); HierarchicalMap subMap=this.getFromSubMap(key); sb.append("\n\t"); sb.append(subMap.toString()); } return sb.toString(); }

Answer 5

以下是通过 React Refs 和.getComputedStyle方法计算CSS属性值的示例：

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

如何从React访问样式？

5 个答案:

findDOMNode（stringDOMRef）