强制 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 {&nbsp; &nbsp; static getDerivedStateFromProps(props) {&nbsp; &nbsp; props.sayHello();&nbsp; &nbsp; return null;&nbsp; }&nbsp; render() {&nbsp; &nbsp; console.log("Rendering");&nbsp; &nbsp; return <div>Hello {this.props.name}</div>;&nbsp; }&nbsp;}class Hello extends React.Component {&nbsp; sayHello() {&nbsp; &nbsp; console.log("Hello!");&nbsp; }&nbsp; render() {&nbsp; &nbsp; return <App sayHello={this.sayHello} />;&nbsp; }}ReactDOM.render(&nbsp; <Hello />,&nbsp; 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">&nbsp; &nbsp; <!-- This element's contents will be replaced with your component. --></div>doSomething函数来自哪里并不重要，你可以将它作为一个 prop 传递，或者直接调用它。