Question

我遇到了一个试图使用refs的奇怪错误。

父组件：

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {displayPage: 'one'};
    this.changePage = this.changePage.bind(this);
  }

  changePage(str){
    this.setState({
      displayPage: str
    })
  }

  render(){
    return(
      <div onClick={ () => this.displayPage('one')}>One</div>
      <div onClick={ () => this.displayPage('two')}>Two</div>
      <div onClick={ () => this.displayPage('three')}>Three</div>

      {this.state.displayPage === 'one' ? <One /> : true}
      {this.state.displayPage === 'two' ? <Two /> : true}
      {this.state.displayPage === 'three' ? <Three /> : true}
    );
  }
}

现在，只是一个子组件的简单示例：

class Two extends Component {
  render(){
    console.log(this, this.refs)

    return(
      <div refs="test">This is the Two component</div>
    );
  }
}

我的问题是＆＃34;这个＆＃34;的console.log将显示＆＃34; refs＆＃34;拥有我想要的一切。当它记录＆＃34; this.refs＆＃34;我得到的全部是＆＃34;对象{}＆＃34;。这只会发生在组件Two和Three中，或者基本上是由于状态而不会立即显示的组件。＆＃34; this.refs＆＃34;将始终适用于立即显示的组件。

另外，如果我将它们从三元条件中取出，则refs将按预期工作。

Answer 1

将div中的ref更改为ref，如下所示：

ref="test"

另外，只是按字符串分配refs已被弃用，所以我建议你只需将一个回调传递给一个ref，它将它作为静态属性重新分配给类，如下所示：

ref={(node) => { this.test = node; }}

React - 根据状态渲染时，不能在子组件中使用refs

1 个答案: