要素から反応する成分を反応させる

Question

現在、私のウェブサイトの要素をまとめていますが、反応の成分を取り除いています。ここで は、例えばボタンです：

import React  from 'react'; 

class Button extends React.Component { 
    render() { 

    return <button className={this.props.bStyle}>{this.props.title}</button>; 

    } 
} 

export default Button; 

私はそれらの大規模なリストがあるように起こっているので、反応のコンポーネントに入れるために、他の要素がたくさんあります。

問題は、あなたがそれらの多くを持っていると、すべてのリストをインポートする必要が本当にあまりにも大きくなります。

ただ、これらの50を想像：

import Element from './Element.component'; // x50 ? 

私の質問は...リアクトのコンポーネントの大きなリストをインポートへのより良いアプローチですか？

Answer 1

すべての要素を1つのファイルにインポートし、個別にすべてエクスポートすることができます。次に、すべてを要素としてインポートし、elements.someComponentとして使用できます。

// common.js because you ll commonly use them 
import Element from './Element.component'; 
import Element2 from './Element.component2'; // x50 ? 
/* ... */ 
export { Element, Element2 /* ... */ }; 

// in someOtherFile.js 
import * as Elements from './common'; 
/* 
    now you are able to use these common elements as 
    <Elements.Element /> 
    <Elements.Element2 /> 
    ... 
*/