Question

以下代码显然不起作用但是想法是，我想根据子组件的clientHeight进行条件渲染，不确定是否可能

class App extends Component {
  constructor() {
    super();
    this.comp = {};
    this.state = {
      clientHeight: 0
    };
  }

  componentDidMount() {
    console.log(this.comp)
    this.setState({
      clientHeight: this.comp.clientHeight
    });
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} ref={comp => this.comp = comp}/>
        {
          this.state.clientHeight > 100 ? <ComponentA /> : <ComponentB />
        }
      </div>
    );
  }
}

Answer 1

您可以通过设置clientHeight组件

中的<Hello/>值来执行此操作

class App extends Component {
  constructor() {
    super();
    this.state = {
      clientHeight: 0
    };
  }

  handler(newSize) {
      this.setState({
          clientHeight: newSize
      })
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} onResize={this.handler}/>
        {
          this.state.clientHeight > 100 ? <ComponentA /> : <ComponentB />
        }
      </div>
    );
  }
}

你可以通过window.addEventListener('resize', ((c)=>{console.log(window.innerHeight)}));

获得窗口高度

Answer 2

事实证明@Dane的想法帮助了我。用componentDidUpdate钩子。这个实现了我想要的东西，但它每次渲染两次，一个用于ref分配，并将更新更改为新的clientHeight，然后再根据新的clientHeight渲染。不确定是否有更好的方法。

class App extends Component {
  constructor() {
    super();
    this.comp = {};
    this.state = {
      clientHeight: 0
    };
  }

  componentDidUpdate(prevProps){
      if(prevProps !== this.props){
        this.setState({
          clientHeight: this.comp.clientHeight
        })
      }
    } 

  render() {
    return (
      <div>
        <Hello name={this.state.name} ref={comp => this.comp = comp}/>
        {
          this.state.clientHeight > 100 ? <ComponentA /> : <ComponentB />
        }
      </div>
    );
  }
}

我可以在渲染中使用refs吗？

2 个答案: