Сегодня мы рассмотрим, как создать простой реактивный компонент многократного использования.
Наш исходный код будет:
Предположим, мы хотим иметь несколько экземпляров одного и того же div в нашем «контейнерном» div, например:
Вместо этого мы можем использовать повторно используемый компонент реакции:
Здесь у нас есть встроенная функция, которая возвращает div, в который мы можем ввести наше сообщение.
Давайте теперь напишем сообщение, используя компонент реакции:
Если вы используете reactdom для рендеринга этого, вы получите:
Теперь используем синтаксис JSX:
Если вы сделаете это element, вы получите:
В нем говорится, что «если вы хотите отобразить компонент реакции, начните его имя с заглавной буквы», поэтому мы должны обновить наш message до Message.
Теперь визуализируйте это, и результат будет:
Вы даже можете попробовать что-то вроде:
Если мы изменим msg на children, результат будет таким же, поскольку в JSX дочерние элементы также являются реквизитом, который позволяет нам вставлять элементы в наш div.
Это все, что нужно для подхалимства.
