哪個組件應該控制較低組件的加載狀態？

比方說，我有這些組件：哪個組件應該控制較低組件的加載狀態？

Translator 
    TranslationList

Translator決定翻譯方面，具有翻譯功能。 TranslationList必須證明這些「可視狀態」：裝載，結果列表，沒有結果。

的頁面（一個實例）周圍的Translator移動：上聚焦的輸入端，它的動作「下面」，並給出與建議一個下拉菜單。

所以在每次移動時，它具有：

表示它加載的翻譯
顯示翻譯列表或沒有結果的消息。

所以我的問題是：

哪個組件應控制在「加載」可視狀態？

如果Translator組件控制它，它必須通過loading=true translations=[]作爲道具到Translation列表。然後，它不得不用新的道具loading=false translations=[...]重新渲染它。這似乎有點違反直覺的，因爲loading感覺就像TranslationList組件的狀態。

如果我們的TranslationList組件具有loading狀態，那麼它也必須有辦法translate的事情，這意味着我必須通過translate功能道具。然後我會把translations和loading作爲狀態。這一切都有點混亂，因爲它現在還必須接收字符串來翻譯，上下文。

我也不想對裝載消息，沒有結果的消息中分離出來的部件。我寧願保留這些在TranslationList裏面，因爲這3個共享相同的包裝<div class="list-group"></div>

也許這兩個組件之間應該只有一個Component，只負責提取翻譯數據？

來源

2016-06-15 gskema

翻譯器組件應該控制一個下部部件列表組件的載荷狀態。持有加載和翻譯邏輯，但通過將其包裝在高級組件中，您應該放置大部分邏輯。鏈接爲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);

來源

2016-06-15 08:33:52

你可以引入一個高階組件來控制負載狀態和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

來源

2016-06-15 08:41:57 ctrlplusb

哪個組件應該控制較低組件的加載狀態？

回答

相關問題