在父组件中执行操作后在子组件中运行函数

Question

我正在使用 refs 来计算子组件中的块高度，它在内部工作正常，所以在每个 removeHandler() 函数“doCalculating”被调用后

但如果我试图将其调用到父组件中，doCalculating() 总是返回初始值。就像在 componentDidMount() 之后一样 似乎 doCalculating() 到父组件中仅引用 this.refs.tagList.clientHeight 一次，即使在子组件更新后也不会重新计算

这里使用的是 React 14.7 版本，所以不能使用 hooks

class ChildComponent extends Component {
  componentDidMount() {
    this.doCalculating()
  }

  doCalculating = () => {
    const defaultHeight = 50
    const newHeight = this.refs.tagList.clientHeight

    if (newHeight > defaultHeight ) {
      // do logic
    }
  }

  render() {
    return (
      <ul
        ref={"tagList"}
      >
        {array.map((item, index) => (
            <li key={index}>
              <button>
                {item}
                <span onClick={
                  (e) => {
                       this.removeHandler()
                       this.doCalculating()
                    } 
                 } ></span>
              </button>
            </li>
          )
        )}
      </ul>
    )
  }
}


class ParentComponent extends Component {

  actionFunc = () => {
    // some logic

    // call recalculate function, that always return initial value
    this.responsesTags.doCalculating()
  }

  render() {
    return (
      <div>
        <ChildComponent
          ref={instance => { this.responsesTags = instance }}
        />
        <button onClick={() => this.actionFunc()} />
      </div>
    )
  }
}

在父组件中调用时重新计算函数缺少什么？

Answer 1

在我看来，您的代码可以正常工作，我已经修改了您的示例（有点不同），也许它对您有用：https://jsfiddle.net/tu7vxfym/。如果我从子组件和父组件计算ul 的高度，它将正确计算。

class ChildComponent extends React.Component {
  constructor(){
    super();
    this.doCalculating = this.doCalculating.bind(this);
    this.addDiv = this.addDiv.bind(this);
    this.state = {
      list: [],
      height:undefined
   }
 }
componentDidMount() {
  this.doCalculating()
}
doCalculating (){
  const defaultHeight = 50
  const newHeight = this.refs.tagList.clientHeight;
  this.setState(state=>{
    return state.height = this.refs.tagList.clientHeight
  })
  console.log(newHeight)
}
addDiv(){
  this.setState(function(state){
    return state.list.push(this.refs.tagList.clientHeight)
  })
}
render() {
  return (
    <div>
      <ul ref={"tagList"}>
       {this.state.list.map((e,i)=>{
         return (<li key={i}>{e}</li>)
       })}
      </ul>
      <h1>Calculated height: {this.state.height}</h1>
      <button onClick={this.addDiv}>Add list</button>
      <button onClick={this.doCalculating}>Child button</button>      
    </div>
   )
  }
}

class ParentComponent extends React.Component {
  constructor(){
   super();
   this.actionFunc = this.actionFunc.bind(this)
  }

  actionFunc(){
   this.responsesTags.doCalculating()
  }

  render() {
    return (
     <div>
      <ChildComponent ref={instance => { this.responsesTags = instance }}/>
      <button onClick={this.actionFunc}>Parent button</button>
     </div>
   )
 }
}