API呼び出し、ユーザー入力などでReactコンポーネントを構造化する

Question

Reactに必要なものを実装する際に問題があります。

私はいくつかの例を見つけ、Codecademy Reactチュートリアルのパート1に進みました。だから、私は小道具や状態をある程度理解していますが、私は特定のユースケースに適用するのが難しいと感じています。

私は呼び出したいPython Flask APIを持っています。

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == 200) { 
     callback(xhr.responseText) 
     } 

param1 = encodeURIComponent(document.getElementById("param1").value); 
param2 = encodeURIComponent(document.getElementById("param2").value); 
xhr.open("GET", "/apicall?param1="+param1+"&param2="+param2", true); 
xhr.send(null); 

マイフラスコAPIはこれを処理し、パラメータに基づいて、いくつかの計算を実行し、結果をJSONオブジェクトを返すことができますすなわち：私はこのような基本的なXMLHttpRequest Sを使用するつもりだ

{ 
result1: 100, 
result2: 150 
} 

私の基本的なページ構造は、入力セクションと結果セクションです。 入力セクションの下部に2つのボタンがあります。ボタン1は、結果を計算して表示することです（API呼び出しを行い、入力データが有効でAPI呼び出しが有効な結果を返した場合に結果セクションを表示させる必要があります）。ボタン2はクリアする（結果セクションをクリアして非表示にし、入力セクションのボックスから入力値をクリアする）。

結果セクションには、（入力セクションと結果セクションの両方のパラメータを使用して）別のAPI呼び出しが必要な追加の結果を表示するためのボタンもあります。

このプロジェクトは、jQueryで操作されたhtmlテンプレートを使い始めました。今のところ、私のReactコンポーネントはまだ「React-y」（これは主な問題です）です。

ここで私が今持っているもののいくつかのサンプルコードです：

var Input = React.createClass({ 

    render() { 

     return (
      <div className="input-container"> 
       <h2>Inputs</h2> 
       <h4>Input 1</h4> 
       <input className="input-box" name="param1" id="param1"/> 
       <input className="input-box" name="param2" id="param2"/> 
       <button className="input-btn" id="calculate">Calculate</button> 
       <button className="input-btn" id="clear">Clear</button> 
      </div> 
      ); 
     } 
    }); 

私は何を考えていることは、私は内部メソッドである必要がありますねこれは、私は関数を呼び出すAPIに、ボタンのonClick小道具を設定する必要がありますInputクラス？

私の結果のセクションでは、このようなものです：だから

var Results = React.createClass({ 

    render() { 

    return (
     <div className="results-container" style={display: 'none'}> 
      <h2>Results</h2> 
      <p>Result 1 is <strong><span id="result1"></span></strong></p> 
      <p>Result 2 is <strong><span id="result2"></span></strong></p> 
      <button class="btn" id="show-result-plots">Show Results Plots</button> 
      <div className="plots-container"> 
      <div id="plot1"></div> 
      <div id="plot2"></div> 
      </div> 
     </div> 
     ); 
    } 
}); 

、明らかに私は、私はおそらく小道具を使用して、結果のコンポーネントへの入力コンポーネントから取得するつもりだAPIデータを渡す必要があります。しかし、ResultコンポーネントがInputコンポーネントの子である必要があるか、またはそれらのコンポーネントの間にデータを渡す親が必要なようです。それほど重要ではないが、API呼び出しが成功したときに表示されるようにResultコンポーネントの状態を更新する必要もあります。

私はほとんどの部分を持っていますが、私は正しい方法でそれらをまとめるのに苦労しています。

Answer 1

データ処理にはReduxを使用しています。これは単にアプリ内のすべてのフローになります。あなたが状態と行動を処理するためにそれを使用したくない場合、私はあなたが正しい道にいると信じています。

入力と結果を子として持つ親コンポーネントが存在する必要があります。親コンポーネントには、データフェッチ関数が含まれていて、それらを小道具として子に渡す必要があります。 API呼び出しが返すデータは、データを必要とする子にも小道具として渡す必要があります。子コンポーネントは、基本的にデータを表示する「ダム」にする必要があります。親コンポーネントは他のすべてを処理する必要があります。