Эй, ребята, я вернулся снова, но с темой, которую я сейчас изучаю, поэтому хотел бы поделиться с вами, милые ребята. Причина, по которой я делаю это, заключается в том, чтобы укрепить концепции и поделиться своими знаниями с более широким сообществом, чтобы мы могли расти вместе, чтобы сделать лучшее будущее для тех, кто последует, надеюсь.
Таким образом, свойства — главный актив React, это то, что дает ему уникальную возможность создавать массовые приложения в большем масштабе, например, Facebook и Twitter. Прежде чем я начну, важно отметить, что для вашего приложения существует несколько шаблонов проектирования, но для нас, новичков, я сосредоточусь на отношениях контейнер/компонент.
Контейнер обрабатывает всю нашу бизнес-логику, тогда как компонент просто отображает эту информацию. Важным вопросом здесь является то, как они общаются друг с другом?
Реквизиты, сокращенные от свойств, передаются вниз, в то время как события передаются вверх. Что я имею в виду? Внутри контейнера вы будете хранить функции, которые можно передать компонентам в качестве реквизита. Затем компонент может использовать это, используя, например, события кликов и проходя через эти функции. Это может показаться довольно запутанным, поэтому позвольте мне привести вам наглядный пример. Допустим, для этого примера App.jsx является контейнером, а кнопка — компонентом.
App.jsx:
const App = () =› {
const openModal=() =› {
console.log('Модал открыт!')
}
const closeModal=() =› {
console.log('Модал закрыт!')
}
const changeColor =(event) =› {
console.log(событие)
event.target.style.background = «зеленый»
}
возврат (
‹основной›
‹Нажата кнопка={openModal} /›
‹Нажата кнопка={closeModal} /›
‹Нажата кнопка={changeColor} /›
‹/главная›
)}
Кнопка jsx(дочерняя):
const Button = (реквизит) => {
const {щелкнул} = реквизит;
возвращаться (
‹кнопка onClick={нажата}›
)}
Итак, в приведенном выше примере мы используем событие javaScript onClick, чтобы передать функцию, вызываемую в приложении Container. Надеюсь, это имеет смысл. Это одна из вещей, которая делает React таким мощным. Мы можем объявить столько функций, сколько захотим, а затем, используя один параметр в этом примере, мы можем иметь несколько кнопок в любом месте, выполняющих различные события на нашей странице, без необходимости жестко кодировать каждую функцию кнопки в разных местах нашего приложения. Вместо этого мы передаем функции в качестве реквизита, где и когда мы этого хотим. Простой.
Помните также, что функции записываются в родительском контейнере, а не в компоненте. Итак, в итоге мы создаем функцию в родительском элементе и передаем ее в качестве реквизита дочернему элементу. Затем дочерний элемент изменяет информацию в родительском с помощью обработчиков событий, которые передаются обратно в родительский контейнер. Теперь важно отметить, что родительский контейнер также может обрабатывать состояние, однако я не хочу бомбардировать вас слишком большим количеством концепций в одном блоге… Может быть, в другой раз, если вы считаете, что это будет полезно?
