ReactJS 두 개의 다른 구성 요소

Question

ReactJS 구성 요소에 관한 질문이 있습니다. 제가 ReactJS에서 새로 온 것처럼 제발 저를 참아주십시오. 나는 ReactJS로 이것을 어떻게하는지 알아 내야 만한다. 여기 시나리오가 있습니다.

시나리오 :

<div> 
    <button id="download-button">Download as CSV</button> <!-- This is a ReactJS Component --> 
    <h3>Filters</h3> 
    <form> 
     <!-- 
      SOME FILTER FIELDS 
     --> 
     <input type="submit" value="Filter" /> 
    </form> 
</div> 

<div> 
    <h2>Filtered Search Result</h3> 
    <div id="result" filters="<?php echo $filters ?>"></div> <!-- This is a ReactJS Component --> 
</div> 

문제 : 빈 결과가 있다면

내부 결과 구성 요소는, 내가 다운로드 버튼을 숨기려. 다운로드 버튼이 결과 컴포넌트 안에 있으면 간단하다는 것을 이해합니다. 하지만이 경우 HTML 요소 위에 결과 버튼을 액세스 할 수 있도록 결과 구성 요소와 관련이없는 HTML 요소를 모두 작성하고 싶지는 않습니다. react에서

Answer 1

당신의 구성 요소가 render() 방법 null를 반환 할 수 있습니다

그래서이

// @flow 
import React from "react"; 
Props = { 
    renderNull: boolean 
} 
const MyNullDecoratorComponent = (props: Props) => props.renderNull && null || "some text"; 

Answer 2

당신은 모두 하나 개의 부모 구성 요소에 하위 구성 요소 (방법 checkResultLength 및 this.state.downloadVisible을 가진 넣을 수 있습니다 유효 = true).

결과 구성 요소에이 두 요소를 전달합니다.

"componentDidMount"에 결과 구성 요소의 확인 및 통화 0

this.state 당신의 results.length의 === 경우 state.downloadVisible = false를 설정합니다 상위 구성 요소에서 전달 함수 checkResultLength. downloadVisible은 필터 양식 구성 요소의 소품으로 전달되며 이에 따라이를 숨기거나 표시 할 수 있습니다.

Answer 3

먼저 두 구성 요소 간 통신 방법을 알아야합니다. 이 두 구성 요소가 부모 < -> 자식이면, 그들은 Props 또는 함수 콜백으로 통신 할 수 있습니다.

귀하의 구성 요소는 부모 관계가 아니므로 유익한 데이터 흐름을 사용하는 가장 좋은 방법은 필터 결과를 전체 구성 요소 상태로 처리 할 수 ​​있습니다.

Redux, Alt.js 등과 같은 Flux 데이터 흐름을 익혀야 문제를 해결할 수 있다고 생각합니다.

나는 Alt.js를 사용합니다. 여기 내 데모 here입니다. 도움을 받으시기 바랍니다.

Answer 4

당신은 DOM에 구성 요소의 Result 그냥 쉽게 DownloadBtn 구성 요소에 가드 연산자를 추가 할 수 있습니다

class Result extends Component { 
 
    render() { 
 
    const { result } = this.props // is the same with const result = this.props.result 
 
    
 
    return (
 
     <div> 
 
     {result.length >= 0 && 
 
      <DownloadBtn /> 
 
     } 
 
     { // render results here } 
 
     </div> 
 
    ) 
 
    } 
 
}