Внедрение RBAC для реагирования на компоненты

Question

Если у нас есть компонент React, допустим, что <App /> визуализируется в другом компоненте реагирования. Могу ли я иметь <App doSomething/>, чтобы я мог вызвать функцию doSomething до того, как она будет отрисована?

Извините, чтобы добавить к вышеупомянутому вопросу - я хочу объявить doSomething снаружи в библиотеке, чтобы я мог импортироватьи вызвать его до того, как будет обработан компонент React <App doSomething/>.

Answer 1

Да

В этом случае doSomething - это опора, которая может быть функцией. Используя методы жизненного цикла React, вы можете вызвать эту функцию до визуализации компонента.

Из реагирующих документов:

getDerivedStateFromProps вызывается непосредственно перед вызовом метода рендеринга, как на начальном монтировании, так и на этапе монтирования. на последующие обновления. Он должен возвращать объект для обновления состояния или значение NULL для обновления

(поскольку ComponentWillMount устарело).

EX:

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, вы можете передать ее в качестве опоры или вызватьэто напрямую.

Answer 2

Здесь вы можете прочитать о методах жизненного цикла. https://reactjs.org/docs/react-component.html#the-component-lifecycle

Время до componentWillMount() было тем, что вы искали. Теперь это устарело.

В соответствии со схемой, которая была связана на странице реагирующих документов, местом для выполнения этих вызовов может быть constructor http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Также вы можете установить для логического значения по умолчанию значение false,и в componentDidMount делайте то, что вы хотите, и установите логическое значение в true, но в методе рендеринга проверьте, является ли этот логический параметр истинным, и визуализируйте ваши вещи