Вопросы для собеседования — React (7): взаимодействие компонентов React

В разработке React взаимодействие компонентов является основной концепцией, которая позволяет различным компонентам работать вместе для достижения более сложных взаимодействий и передачи данных. Методы связи общих компонентов: родитель-сын и сын-отец.

1. Общение отца с сыном

Передача данных из родительских компонентов в дочерние — наиболее распространенная форма связи в React. Этот подход подходит для передачи данных из компонента верхнего уровня в его прямые дочерние компоненты.

Метод реализации:
передача данных путем добавления свойств (props) к подкомпонентам.

Пример:

• родительский компонент

import React from 'react';
class ParentComponent extends React.Component {
  render() {
    const message = "Hello from parent!";
    return <ChildComponent message={message} />;
  }
}

• Подсборка

import React from 'react';
class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}

В приведенном выше примере данные передаются ParentComponentчерез messageатрибут ChildComponent, и дочерний компонент может this.propsполучить доступ к этим данным и отобразить их.

2. Общение сына с отцом

Передача данных или запуск событий от дочерних компонентов к родительским является еще одной распространенной формой связи. Этот подход подходит для ситуаций, когда дочернему компоненту необходимо передать данные родительскому компоненту.

Метод реализации:
определив функцию обратного вызова внутри подкомпонента и затем передав эту функцию обратного вызова подкомпоненту, подкомпонент вызывает эту функцию в подходящее время для передачи данных.

Пример:

• родительский компонент

import React from 'react';
class ParentComponent extends React.Component {
  handleDataFromChild(data) {
    console.log("Data from child:", data);
  };

  render() {
    return <ChildComponent onDataReady={data => this.handleDataFromChild(data)} />;
  }
}

• Подсборка

import React from 'react';
class ChildComponent extends React.Component {
  sendDataToParent() {
    const data = "Data from child!";
    this.props.onDataReady(data);
  };

  render() {
    return <button onClick={() => this.sendDataToParent()}>Send Data</button>;
  }
}

В приведенном выше примере функция обратного вызова передается родительскому компоненту ChildComponentчерез реквизит. onDataReadyПри нажатии кнопки внутри дочернего компонента будет вызвана эта функция обратного вызова, и данные будут переданы родительскому компоненту.

3. Пример применения

Ниже приведен пример практического применения, демонстрирующий применение методов общения «отец-сын» и «сын-отец».

• родительский компонент

import React, { Component } from 'react'
class ParentComponent extends Component {
  constructor() {
    super()
    this.state = {
      tabs: ["首页", "热门", "我的"],
      curIndex: 0
    }
  }
  tabClick(ind) {
    this.setState({ curIndex: ind })
  }
  render() {
    const {tabs, curIndex} = this.state
    return (
      <div className="App">
        <ChildComponent tabs={tabs} tabClick={(ind) => this.tabClick(ind)} />
        <h2>{tabs[curIndex]}</h2>
      </div>
    );
  }
}

• Подсборка

import React, { Component } from 'react'
class ChildComponent extends Component {
  constructor() {
    super() 
    this.state = {
      currentIndex: 0
    }
  }
  changeTab(ind) {
    this.setState({ currentIndex: ind })
    this.props.tabClick(ind)
  }
  render() {
    const { tabs } = this.props
    const { currentIndex } = this.state
    return (
      <div>
        <ul className='tabUl'>
          {
            tabs.map((item, ind) => {
              return(
                <li 
                  key={item} 
                  className={`${currentIndex === ind ? "active" : ''}`}
                  onClick={e => this.changeTab(ind)}
                >
                  <span>{item}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

В приведенном выше примере реализован эффект переключения вкладок.Родительский компонент передает информацию дочернему компоненту, а дочерний компонент запускает обратный вызов для передачи индекса выбранной вкладки для реализации эффекта переключения.