ReactJS 2つの異なるコンポーネント

Question

ReactJSコンポーネントに関する質問があります。私はReactJSの新機能なので、私と一緒にご負担ください。私はReactJSでこれをどうやって行うのか考え出している。ここにシナリオがあります。

SCENARIO：

<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要素の上にある結果ボタンにアクセスできるようにしたいだけです。あなたのコンポーネントがrender()方法

でnullを返すことができreactで

Answer 1

だから、これは有効な

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

Answer 2

であるあなたは、この方法checkResultLengthとthis.state.downloadVisibleを持つ（1つの親コンポーネントに両方の子コンポーネントを置くことができます=真）。

この2つをresultコンポーネントのpropsとして渡します。 「componentDidMount」であなたの結果コンポーネントで

チェックとcheckResultLengthがあなたのresults.lengthの=== 0

this.state場合はfalse state.downloadVisible =を設定します親コンポーネントから渡された関数を呼び出します。 downloadVisibleは、フィルタフォームコンポーネントの小道具として渡され、それに応じて非表示にすることができます。

Answer 3

まず、2つのコンポーネント間の通信方法を理解する必要があります。この2つのコンポーネントがparent < - > childの場合、それらはPropsまたは関数コールバックによって通信できます。

あなたのコンポーネントは親の関係ではありませんので、最良の方法はフラックスデータフローです。フィルタ結果をグローバルコンポーネント状態として扱うことができます。

Redux、Alt.jsなどのFluxデータフローを学ぶ必要があると思いますが、問題を解決できます。

私はAlt.jsを使用しています。ここにデモがあります。

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> 
 
    ) 
 
    } 
 
}