反應使元素脫離元素

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

您可以將所有元素導入到一個文件並單獨導出。然後，您可以將所有元素導入爲元素，並用作element.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 /> 
    ... 
*/