Question

我通过道具传递一个子组件highlight()的函数，但我在子组件上运行该函数时遇到问题。当我在this.props中将componentDidMount()记录到控制台时，我看到了它，但是当我尝试调用它时它不起作用。

class Queen extends React.Component {
  componentDidMount() {
    console.log('1) The Queen component has mounted!');
    this.props.highlight()
  }


  render() {
    return (
      <div>
        <h2>
          {this.props.name}
        </h2>
      </div>
    );
  }
}

class King extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      highlighted: false
    }
   }

  componentDidMount() {
    console.log('2) The King component has mounted!');
  }


   highlight() {
    this.setState({
      highlighted: !this.state.highlighted
    })
  }

  render() {
    return (
      <div className="card">
        <h1>The King's Queen is...</h1>
        <Queen 
          name="Amelia" 
          highlight={() => this.highlight.bind(this)}
          className={this.state.highlighted ? 'highlight' : ''}/>
      </div>
    );
  }
}


ReactDOM.render(<King />, 
                document.querySelector(".wrapper"));

这是否正在发生，因为Queen组件已经安装在King之前，因为它是一个子组件？试着绕过这里发生的事情，同样重要的是为什么这不起作用。

Answer 1

您正在访问处理程序而不是仅仅绑定它。

<Queen 
  name="Amelia" 
  highlight={this.highlight.bind(this)}
  className={this.state.highlighted ? 'highlight' : ''}
/>

更进一步，你可以在构造函数

中绑定你的处理程序

class King extends React.Component {
  constructor(props) {
    super(props)

    this.highlight = this.highlight.bind(this)
   }

   highlight() {
    ...
  }

  render() {
    return (
      <div className="card">
        <h1>The King's Queen is...</h1>
        <Queen 
          name="Amelia" 
          highlight={this.highlight}
          className={this.state.highlighted ? 'highlight' : ''}/>
      </div>
    );
  }
}

将函数传递给子组件

1 个答案: