세 구성 요소 사이에 소품 전달

Question

활성 장치 (iphone 또는 ipad 일 수 있음)에 따라 데이터를 표시해야합니다. App, DeviceCheck 및 Collection의 세 가지 구성 요소가 있습니다. 장치 확인은 Iphone 및 iPad의 2 개 버튼이있는 구성 요소입니다. 컬렉션의 구성 요소에서 내가 같은 예를 들어 뭔가를 외부 파일에서 데이터를 분석하고 있습니다 :

const applications = [ 
    { 
    device: 'iPhone', 
    icon: icon, 
    title: 'title', 
    descr: 'descr', 
    category: 'Games', 
    link: 'link-to-appstore', 
    price: 0.99, 
    purchases: true 
    }, 
    { 
    device: 'iPad', 
    icon: icon2, 
    title: 'title2', 
    descr: 'descr2', 
    category: 'Games', 
    link: 'link', 
    price: 1.99, 
    purchases: false, 
    } 
] 

App.js 구조 것은 :

<DeviceCheck /> 
<Collection /> 

내가 아이폰 또는 아이 패드 데이터를 표시하려면 어떻게 DeviceCheck 구성 요소에서 어떤 버튼을 클릭했는지에 따라 콜렉션 구성 요소?

Answer 1

1. 장치 검사에 콜백을 전달하는 구성 요소를 만듭니다.
2. 이 콜백을 사용하여 컨테이너 검사를 장치 검사에서 업데이트합니다.
3. 컨테이너의 상태를 사용하여 컬렉션의 소품을 설정합니다.

이것은 React에서 매우 일반적이며 구성 패턴이 작동하는 방식의 기초입니다. 두 구성 요소간에 데이터를 공유하려면 컨테이너에 넣고 상위 구성 요소로 상태를 들어 올리면됩니다. 이러한 구성 요소는 일반적으로 컨테이너라고하며 여기에 문서가 많이 있습니다.

이 좋은 출발점입니다 https://reactjs.org/docs/lifting-state-up.html이

거친 레이아웃이 같은 것입니다.

class Container extends React.Component { 
    constructor(props) { 
    super(props); 

    // Don't forget to bind the handler to the correct context 
    this.changeDevice = this.changeDevice.bind(this); 
    } 

    changeDevice(device) { 
    this.setState({device: device}); 
    } 

    render() { 
    return (
     <DeviceCheck btnCb={this.changeDevice} /> 
     <Collection device={this.state.device} /> 
    ) 
    } 
} 

Answer 2

조금 광범위한 질문이지만, 당신이 선택한 장치와 state 객체를 누른 상태에서 선택 한 설정을 클릭 <DeviceCheck /> 버튼을 setState을 사용할 수 있습니다. <Collection {...selectedDevice} />은 상태 객체를 입력으로 사용합니다.

Answer 3

1. App.js의 변수를 selectedDevice이라고 유지합니다.
2. 버튼의 클릭 핸들러에서 setState()을 호출하여 selectedDevice 상태를 수정합니다.
3. 사용 selectedDevice는 상태와 파라미터에 기초하여 상기되는 DeviceType 설정 함수로되는 DeviceType을 가질 수 있고,이 함수는 소품으로 전달되어야하는 애플리케이션 구성 요소에서 <Collection />

Answer 4

에 대응하는 데이터를 표시 DeviceCheck 구성 요소. DeviceCheck 버튼에서 버튼을 클릭하면 해당 버튼 유형을 매개 변수로 사용하여 prop 기능을 호출해야합니다. deviceType 상태는 Collection 구성 요소에 prop로 전달되어야하며 prop 값을 기반으로 Collection 구성 요소는 각 Device 데이터를 렌더링 할 수 있습니다. 희망이 도움이!