Блог

Допустим, у нас есть компонент со следующим определением:

 export const MentForm: React.FC<IProps> = (props: IProps) => {
 

Это возвращает a div с загрузкой HTML, некоторые из которых следующие:

     <div className="form">
        <MentFormButton {...fProps} />
        <FlyComp
          user={props.user}
          onClick={props.onShowFly(props.user)}
        />
        {showFlyForm (
          <FlyForm
            onFlyed={() => {
              if (props.onFlyClicked) {
                props.onFlyClicked(flies)
              }
              setShowFlyForm(false)
            }}
            onFlyFail={() => {
              setShowFlyForm(false)
            }}
            user={flies}
          />
        )}
    </div>
 

Теперь, когда мы нажимаем кнопку, запускается onShowFly

У нас есть еще один файл TSX, который внутри Test функционального компонента возвращает значение a <div> и имеет следующее:

       <MentForm
        user={new User}
        onCancelClick={() => {
          if (props.user) {
            wait()
          }
        }}
        onShowFly={() => {// HERE //}}
      />
 

Там, где я написал «ЗДЕСЬ», я хочу, чтобы в MentForm активируемом компоненте можно было использовать фигурные скобки…. но я не знаю, как это сделать….

Внутри компонента, который имеет ваш showFlyForm , вы можете использовать useEffect для запуска функции при каждом изменении состояния, а затем просто проверять showFlyForm === true или любую другую логику, которую вы используете для проверки отображения формы.

Пример:

 useEffect(() => {
  showFlyForm amp;amp; [your HERE function]
}, [showFlyForm])