Question

所以我想知道反应哑组件中元素的宽度。

import React from 'react';
import moment from 'moment';

const Message = ({ ...props }) => (
   <article>
     <section> <!-- This is the element I want to find width of -->
       <h2>{name}</h2>
       <p>{description}</p>
     </section>
     <p>{moment(created_at).format("h:mm a")}</p>
   </article>
);
export default Message;

我想找到section元素的宽度，以便我可以根据该宽度进行一些UI更改。这里需要注意的是，这个Message组件正在数组中进行映射。对于每个被渲染的Message组件，我想在每个组件中找到section元素的宽度。

我做了一些研究，并在智能组件中找到了一个类似的实现。

class MyComponent extends Component {
  componentDidMount () {
    console.log(this.myInput.offsetWidth)
  }

  render () {
    <div ref={input => {this.myInput = input}}>some elem</div>
  }
}

我可以这样做但不使用this或不使用state，只使用简单的旧版香草JavaScript。

任何形式的帮助或方向都会受到高度赞赏，干杯:)

获取Dumb React组件内部元素的宽度

0 个答案: