React 구성 요소는 어떻게 서로 통신합니까?

React 구성 요소 간 통신

React에서는 다른 구성 요소의 변경 사항에 따라 한 구성 요소의 데이터를 업데이트해야 할 때 구성 요소 통신이 중요합니다. 이에 접근하는 방법은 구성 요소 간의 관계에 따라 여러 가지가 있습니다.

상위-하위 통신

한 구성 요소가 다른 구성 요소 내에 중첩되면 하위 구성 요소가 상위 구성 요소로부터 prop을 받을 수 있습니다. 하위 구성 요소가 상위 구성 요소를 업데이트해야 하는 경우 prop으로 전달된 콜백 함수를 사용할 수 있습니다.

// Parent component
class Parent extends React.Component {
  handleFilterUpdate = (value) => {
    // Update the state to apply the filter.
    this.setState({ filter: value });
  };

  render() {
    return (
      <Child updateFilter={this.handleFilterUpdate} />
    );
  }
}

// Child component
class Child extends React.Component {
  handleFilterChange = () => {
    // Get the filter value and trigger the parent callback.
    const value = this.refs.filterInput.value;
    this.props.updateFilter(value);
  };

  render() {
    return (
      <input type="text" ref="filterInput" onChange={this.handleFilterChange} />
    );
  }
}

형제 통신

구성 요소가 형제인 경우에는 직접적인 부모-자식 관계. 이러한 경우 고차 컴포넌트(HOC)를 사용하여 두 컴포넌트를 모두 래핑하고 통신 채널을 제공할 수 있습니다.

// HOC
const withFilter = (WrappedComponent) => {
  class Wrapper extends React.Component {
    constructor(props) {
      super(props);
      this.state = { filter: '' };
    }

    handleFilterUpdate = (value) => {
      this.setState({ filter: value });
    };

    render() {
      return (
        <WrappedComponent
          filter={this.state.filter}
          updateFilter={this.handleFilterUpdate}
        />
      );
    }
  }

  return Wrapper;
};

// Child components
const Component1 = withFilter(({ filter }) => <p>Filter: {filter}</p>);
const Component2 = withFilter(({ updateFilter }) => (
  <input type="text" onChange={(e) => updateFilter(e.target.value)} />
));

글로벌 이벤트 시스템

컴포넌트가 별도의 루트 컴포넌트에 있는 경우 , 글로벌 이벤트 이미터 또는 중앙 집중식 상태 관리 솔루션(예: Redux)을 생성하여 통신을 용이하게 할 수 있습니다. 구성 요소는 특정 이벤트나 작업을 구독하고 그에 따라 응답합니다.

위 내용은 React 구성 요소는 어떻게 서로 통신합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!