使用conponentDidMount

Question

我有调用子组件的父组件

class Parent extends Component {
  constructor(props){
    super(props);
    this.data = this.getData();
  }
  getData(val){
  // this is where the problems come when setting
  // val on the second render
   if(typeof val != "undefined"){
    return val;
   }

  }

  render() {
    return (
      <div className="App">
      <Child sendData={this.getLineOffset} onDataLoaded={this.forceUpdate}/>

      </div>
    );

  }
}

export default Home;

在子组件中我运行componentDidMount函数，因为我需要获取在第一个渲染上渲染的div的偏移量。在第二次渲染时，它获得refs值

export default class Child extends Component {
    constructor(props) {
        super(props); 
        }

    componentDidMount() {
        // sending props to the parent
        this.props.sendData(this.refs.el.offsetLeft);
    }
  render() {
    return (
      <div ref="el" > </div>
    ); 
  }
}

我面临的问题是在父级中我只从父级中的第一个渲染中获取值，因为构造函数只保存了我在getData函数中返回的第一个值。

我知道这不是最佳做法，但我找不到任何其他方法来获取渲染内容的偏移量。

我已经尝试在加载数据时使用forceUpdate但是值仍未定义。

当然如果控制台登录getData函数它将显示但仍未保存在构造函数中。

我怎么能解决这个问题？

提前致谢。

Answer 1

您可以通过在子组件中添加componentWillReceiveProps(nextProps)来获取新值。然后，比较第二个渲染上的oldProps和newProps，并将道具更新为新的道具。