强制 RBAC 响应组件

Question

如果我们有一个 React 组件，可以说它<App />正在另一个React 组件中呈现。我能有<App doSomething/>这样我就可以调用函数DoSomething的它之前被渲染？抱歉，补充一下上面的问题 - 我想doSomething在库中声明外部，以便我可以在<App doSomething/>呈现React 组件之前导入和调用它。

Answer 1

您可以在此处阅读有关生命周期方法的信息。https://reactjs.org/docs/react-component.html#the-component-lifecycle

之前的时间componentWillMount()正是您要找的。现在它已被弃用。

根据反应文档页面中链接的图表，进行调用的位置可以是constructor http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

您也可以将默认布尔值设置为 false，然后componentDidMount执行您想要的操作并将布尔值设置为 true，但在渲染方法中检查该布尔值是否为 true 并渲染您的内容

Answer 2

是的

在这种情况下doSomething是一个可以是一个函数的道具。使用 React 生命周期方法，您可以在组件呈现之前调用此函数。

从反应文档：

getDerivedStateFromProps 在调用 render 方法之前调用，在初始安装和后续更新中都是如此。它应该返回一个对象来更新状态，或者返回 null 来更新

（因为ComponentWillMount已弃用）。

前任：

class App extends React.Component {

    static getDerivedStateFromProps(props) {

    props.sayHello();

    return null;

  }

  render() {

    console.log("Rendering");

    return <div>Hello {this.props.name}</div>;

  }

 

}

class Hello extends React.Component {

  sayHello() {

    console.log("Hello!");

  }

  render() {

    return <App sayHello={this.sayHello} />;

  }

}

ReactDOM.render(

  <Hello />,

  document.getElementById('container')

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="container">

    <!-- This element's contents will be replaced with your component. -->

</div>

doSomething函数来自哪里并不重要，你可以将它作为一个 prop 传递，或者直接调用它。