Все мы знаем этого человека, который очень высокомерен. Этот человек - настоящий приверженец этикета и правильных титулов. Это означает, что они будут откровенно игнорировать вас, если вы не обратитесь к ним должным образом, даже если вы стоите прямо перед ними с неоновой вывеской. Как и у людей, у каждого языка есть своя культура и свой этикет, а React.js - такой же язык, как и любой другой. У него есть этикет, которому нужно подчиняться. Например, если вы не называете элементы их собственными именами, React станет высокомерным и проигнорирует вас, даже если вам будет ясно, что вы пытаетесь выразить. В ходе этого блога я буду обсуждать различные элементы и то, как правильно называть (называть) их, чтобы вы не допустили никаких культурных ошибок.

Давайте начнем с трех «культур» React.js: контейнеров, компонентов и функциональных компонентов. Все они могут содержать функции или переменные в зависимости от того, что необходимо. Контейнеры являются родительским элементом как для компонентов, так и для функциональных компонентов. Компоненты и функциональные компоненты обычно находятся там, где элементы и данные фактически отображаются на странице. Основное различие между компонентом и функциональным компонентом заключается в том, что функциональный компонент статичен и не может быть изменен.

Теперь перейдем к вызову элементов с соблюдением соответствующего этикета. Начнем с того, как вызвать функцию. Функции отличные и невероятно полезные. Однако, поскольку передовой практикой является создание функции в компоненте или контейнере самого высокого уровня, ее необходимо передать от родительского элемента к ее конечному целевому дочернему контейнеру. Это должно быть сделано в определенном формате.

  • Напишите функцию над render () (раздел, который вы сначала будете использовать для передачи информации, а затем для визуализации на экране)
  • Затем во время рендеринга вызовите компонент, которому вы хотите его передать, сказав ‹ComponentName function = {this.functionName} /›. Функция не будет передаваться из родительского элемента, если вы не используете префикс «this.».
  • После выхода из родительского элемента, если вы когда-либо захотите снова увидеть эту функцию, вы должны взять то, что вы установили для функции, равной (в данном случае мы назвали ее функцией), и вызвать ее в игру, используя ' this.props.function '. Вы можете передать его еще дальше, используя тот же метод. По сути, вы говорите: «Я хочу использовать эту функцию, которую я только что написал, в будущем».

Далее идут переменные, которые вы определяете в компоненте.

  • Если вы определите его в вышеупомянутом разделе render (), не беспокойтесь о префиксах, вы можете просто передать переменную следующему компоненту, сказав ‹Переменная ComponentName = {переменная} / ›.
  • Однако, если вы определяете его выше render (), что является наиболее распространенным способом выполнения, вы должны сначала установить его как переменную, установив для него состояние. Используя синтаксический сахар, мы можем просто сказать state = {variable: variable}.
  • Эти переменные можно изменить позже с помощью функций. Чтобы отправить состояние этих переменных вниз или даже вызвать их снова в текущем компоненте, уточните, какое состояние вызывается, сказав, что вы хотите это состояние: this.state.variable .
  • Как и функция, он передается следующему компоненту, устанавливая его равным переменной ‹ComponentName variable = {this.state.variable} /›.
  • Чтобы получить доступ к этим переменным в дочернем компоненте, этикет требует, чтобы мы вызывали их, говоря this.props. (Независимо от того, как мы устанавливаем переменную равной).

Еще немного о свойствах. В общем, реквизиты - это свойства, которые передаются от родительского компонента. Состояние можно использовать только в компоненте, в котором оно определено, а свойства можно использовать только в компоненте, получающем состояние. Что особенного нужно знать о свойствах? В этом разница между компонентами и функциональными возможностями. компоненты вступают в игру. Функциональные компоненты - это, по сути, один гигантский функциональный аргумент, которому передаются данные от родительского компонента. Поскольку он статичен, нет смысла писать функции внутри. В функциональный компонент передается аргумент (обычно называемый реквизитом, но вы можете называть его как хотите). Затем этот аргумент становится префиксом, используемым для ссылки на элементы, переданные от родителя. whateveryouwant.variable или whateveryouwant.function.

Надеюсь, этот блог поможет вам выйти из любых неприятных ситуаций или культурных ошибок в вашем будущем React.js.