反应使元素脱离元素

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 /> 
    ... 
*/