Транспортировка пользовательского тега JSX в пользовательскую функцию

Question

JSX-транспилятор React преобразует тег:

<MyComponent />

в:

React.createElement("MyComponent")

---

Мне нужно что-то разработать так что при использовании тега:

<TagFunction msg={varMessage} />

он конвертируется в:

function() {alert(varMessage); }

---

Звучит странно, но это упрощенный пример реальной потребности.

Можно ли это сделать?

Answer 1

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

ЕСЛИ вы используете хуки, вы можете реализовать его как простой компонент и добавить logi c in useEffect

const LogicComponent = ({msg}) => {
   useEffect(() => {
         alert(msg)
   }, [msg])

   return null;
}

Однако, если вы не используете хуки, вам придется написать компонент класса и реализовать его жизненные циклы componentDidMount и componentDidUpdate

class LogicComponent extends React.Component {
   componentDidMount() {
      this.myFunction();
   }

   componentDidUpdate(prevProps) {
      if(this.props.msg !== prevProps.msg) {
          this.myFunction()
      }
   }
   myFunction = () => {
      alert(this.props.msg)
   }
}

Answer 2

Вы можете создать пользовательский компонент следующим образом:

const CustomComponent = (props) => {
   const { varMessage } = props;
   alert(varMessage);
   return null;
}

Затем используйте его следующим образом:

<CustomComponent varMessage="my message" />

Вы можете определить переменную varMessage и передать ее в varMessage опора тоже!