下位コンポーネントのローディング状態を制御するコンポーネントはどれですか？

Question

のは、私は、これらのコンポーネントを持っているとしましょう：

Translator 
    TranslationList 

Translatorは、翻訳コンテキストを決定する関数を翻訳しています。 TranslationListは、これらの「ビジュアル状態」を表示する必要があります。ロード中、結果リスト、結果なし。

Translatorはページの周りを動いています（1つのインスタンス）：入力にピントを合わせると、それが「下」に移動し、候補がドロップダウン表示されます。だから、

それが動くたびに、それが持っている：

• は、それが翻訳
• ショー翻訳リスト、あるいは全く結果のメッセージを読み込みますことを示しています。

だから私の質問は次のとおりです。コンポーネントは、「ロード」の視覚的状態を制御する必要があり

？

Translatorコンポーネントがそれを制御する場合、loading=true translations=[]をTranslationリストに渡す必要があります。その後、新しい小道具loading=false translations=[...]で再びそれを再レンダリングする必要があります。 loadingはTranslationListコンポーネントの状態に似ているため、これは少し直感的です。

我々TranslationListコンポーネントがloading状態を持っている場合、それはまた、私は小道具としてtranslate機能を渡す必要があることを意味し、translate物事への道を持っている必要があります。私はtranslationsとloadingを状態として保持します。これは翻訳された文脈、文脈も受け取らなければならないので、これはすべてちょっと混乱します。

私はまた、メッセージを読み込むための別個のコンポーネントを持っているとは思わないが、結果メッセージはありません。これらの3つの同じラッパーを共有するので、TranslationListの内部に置いておきたいと思います。<div class="list-group"></div>

おそらく、これら2つのコンポーネントの間に1つ以上のコンポーネントが必要です。

Answer 1

トランスレータコンポーネントは、下位コンポーネントリストコンポーネントのローディング状態を制御する必要があります。ローディングと変換のロジックを保持しますが、ロジックの大部分を配置する必要がある高次のコンポーネントにラップすることによって、助けてください。 HOC https://www.youtube.com/watch?v=ymJOm5jY1tQのリンク

const translateSelected = wrappedComponent => 
 
    //return Translator component 
 
    class extends React.Component { 
 
    state = {translatedText: [], loading:true} 
 
    componentDidMount(){ 
 
    fetch("text to translate") 
 
     .then(transText => this.setState({translatedText: transText, loading: false})) 
 
    } 
 
    render() { 
 
    const {translatedText} = this.state 
 
    return <WrappedComponent {..this.props} {...translatedText} 
 
    } 
 
    } 
 

 
    const Translator_HOC = translateSelected(Translator);

Answer 2

あなたは負荷状態とTranslationListのスイッチングを制御するために高次のコンポーネントを導入する可能性。そうすれば、ローディング・ディスプレイをTranslationListから離れて、それが懸念されるものとして分離することができます。これにより、他の領域でHOCを使用することもできます。

Translatorは、データ取り出し/通過を行う「コンテナ」コンポーネントとして機能できます。ここ

// The Loadable HOC 
function Loadable(WrappedComponent) { 
    return function LoadableComponent({ loaded, ...otherProps }) { 
    return loaded 
     ? <WrappedComponent {...otherProps} /> 
     : <div>Loading...</div> 
    } 
} 

// Translation list doesn't need to know about "loaded" prop 
function TranslationList({ translations }) { 
    return (
    <ul> 
     { 
     translations.map((translation, index) => 
      <li key={index}>{translation}</li>     
     ) 
     } 
    </ul> 
) 
} 

// We create our new composed component here. 
const LoadableTranslationList = Loadable(TranslationList) 

class Translator extends React.Component { 
    state = { 
    loaded: false, 
    translations: [] 
    } 

    componentDidMount() { 
    // Let's simulate a data fetch, typically you are going to access 
    // a prop like this.props.textToTranslate and then pass that to 
    // an API or redux action to fetch the respective translations. 
    setTimeout(() => { 
     this.setState({ 
     loaded: true, 
     translations: [ 'Bonjour', 'Goddag', 'Hola' ] 
     }); 
    }, 2000); 
    } 

    render() { 
    const { loaded, translations } = this.state; 
    return (
     <div> 
     <h3>Translations for "{this.props.textToTranslate}"</h3> 
     <LoadableTranslationList loaded={loaded} translations={translations} /> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<Translate textToTranslate="Hello" />) 

実行例：http://www.webpackbin.com/NyQnWe54W

例えば