Question

我有一个名为Component的简单组件，它可以在道具上获取任何HTML元素，并且我必须处理传递的元素，例如插入id，类或获取尺寸（宽度，高度）。

class Component extends React.Component {
  render() {
    return (
    //Handle element before
      <div>
        { this.props.element}
      </div>
    )
 }
}
ReactDOM.render(<Component element = {<div>Its Works!</div>} />, document.querySelector('#app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

好吧，如果不麻烦的话，我想知道如何从该元素（例如window.getComputedStyle()）中获取calculatedStyle，因为即使没有指定它们，我也需要获取一些属性。

非常感谢您！

Answer 1

您可以使用refs

class Component extends React.Component {
  render() {
    return (
    //Handle element before
      <div ref="child">
        { this.props.element}
      </div>
    )
 }
 componentDidMount = () => {
   const {child} = this.refs; 
   console.log(getComputedStyle(child));
 }
}
ReactDOM.render(<Component element = {<div>Its Works!</div>} />, document.querySelector('#app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

React-如何处理在prop中传递的html元素？

1 个答案: