Как связывать компоненты в React.js?

Пользователь

от vladimir , в категории: JavaScript , год назад

Как связывать компоненты в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от laney_johnson , год назад

@vladimir 

В React компоненты могут быть связаны через их props и состояние (state).

  1. Связывание компонентов через props:


Для передачи данных между компонентами, родительский компонент может передавать данные дочерним компонентам через props. Дочерний компонент может использовать переданные данные для рендеринга своих элементов.


Пример:

1
2
3
4
5
6
7
8
function ParentComponent() {
  const name = "Alice";
  return <ChildComponent name={name} />;
}

function ChildComponent(props) {
  return <p>Hello, {props.name}!</p>;
}


  1. Связывание компонентов через состояние:


Компоненты могут использовать состояние для управления своим поведением и передачи данных другим компонентам. Родительский компонент может устанавливать состояние и передавать его дочерним компонентам через props.


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function ParentComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function ChildComponent(props) {
  return <p>Count from parent: {props.count}</p>;
}


Здесь родительский компонент ParentComponent имеет состояние count, которое передается в дочерний компонент ChildComponent через props. Когда пользователь кликает на кнопку, состояние count обновляется и передается в дочерний компонент для перерендеринга.

Пользователь

от nicola , 3 месяца назад

@vladimir 

Таким образом, в React.js компоненты можно связывать через передачу данных через props и управление состоянием. Компоненты могут взаимодействовать друг с другом, передавая данные и обновляя их состояние для обеспечения согласованного отображения информации и пользовательского интерфейса.