Question

如何让func在组件A构造函数反应后运行。当我调试调试代码时，首先要调用func，然后是A构造函数，但是就我而言，我想相反，该怎么做？

function func() {
    return 'aa'
}
class A extends Component {   
  constructor(props) {
    super(props)   
  }

  render() {
    return <div>
      {this.props.children}
    </div>
  } 
}

class App extends Component {   
  render() {
    return (
      <A>
        {func()}
      </A>
    )   
  }

}

Answer 1

有很多解决方案，但是我会做这样的事情：

    function func() {
    return 'aa'
}

class A extends Component {   
  constructor(props) {
    super(props)   
  }

  render() {
    return( <div>
      {typeof this.props.children === 'function' ? this.props.children() : 
       this.props.children}
    </div>)
  } 
}

class App extends Component {   
  render() {
    return (
      <A>
        {func}
      </A>
    )   
  }

Answer 2

您应该执行以下操作：

class A extends Component {   
  constructor(props) {
    super(props)   
  }

  componentWillMount() {
    this.func();
  }

  func() {
    // this will run once when component A runs
  }

  render() {
    return <div>
      {this.props.children}
    </div>
  } 
}

class App extends Component {   
  render() {
    return (
    <A></A>
    )   
  } 
}

这样，当组件App运行时，它将触发组件A中的componentWillMount方法，该方法将调用func（）函数。

反应组件构造后如何让功能运行？

2 个答案: