Как получить доступ к пропсу с именем 'username' в функциональном компоненте?

const MyComponent = (props) => { ... }

this.props.username

props.username

MyComponent.username

username

Начать викторину - "Основы React"

Работа с пропсами в функциональном компоненте React

Пропсы (props), или свойства, в React используются для передачи данных из одного компонента в другой. Как правило, пропсы идут от родительского компонента к дочернему. В функциональном компоненте доступ к пропсам можно получить через его параметры.

В представленном вопросе, свойство username передается в компонент MyComponent. Чтобы получить доступ к этому свойству внутри функционального компонента, нужно использовать props.username.

const MyComponent = (props) => {
  return (
    <div>{props.username}</div>
  );
}

В данном примере, пропс username будет отображен в div элементе. Важно отметить, что ключевое слово this не используется в функциональных компонентах.

const MyComponent = (props) => {
  const { username } = props;
  return (
    <div>{username}</div>
  );
}

Альтернативным и более элегантным способом будет использование деструктуризации прямо в параметрах функции.

const MyComponent = ({ username }) => {
  return (
    <div>{username}</div>
  );
}

В этом случае, username извлекается непосредственно из пропсов при объявление функции.

И поэтому ответ на вопрос "Как получить доступ к пропсу с именем 'username' в функциональном компоненте?" будет props.username.

Работа с пропсами в функциональном компоненте React

Related Questions