如何在反应中使用多个`导出默认`答案

【问题标题】：How to use multiple `export default ` in react如何在反应中使用多个`导出默认`
【发布时间】：2019-02-21 14:58:32
【问题描述】：

import React from 'react';
import PropTypes from 'prop-types';


function BlogTrends(props) {
  BlogTrends.propTypes = {
    data: PropTypes.array
  };
  return (
    <div className="container blog-trends">
       <h3>{props.data[0].head}</h3>
       <h5 className="mar-t-25" >{props.data[0].desc}</h5>
    </div>
  );
}
function BlogDescription() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h5>Kitchen </h5>
        <p>Ocean</p>
      </div>
    </div>
  );
}

export default { BlogTrends, BlogDescription };

错误图片： https://i.stack.imgur.com/fStld.png
试过了：通过删除 BlogDescription 并将导出语句设置为 'export default { BlogTrends;'正在工作中。但是，当我添加多个组件时，它不起作用。尝试了几件事，即
export default { BlogTrends, BlogDescription }; 和
export { BlogTrends, BlogDescription }; 和

export BlogTrends;<br />
export  BlogDescription;<br />

【问题讨论】：

导出默认值只能适用于一件事，例如导出默认函数 BlogDescription() - 然后您可以使用导出函数 BlogTrends()
@rrd 是的，它有效.. 谢谢:)
这能回答你的问题吗？ exporting multiple modules in react.js

标签： javascript html reactjs export

【解决方案1】：

您不能有多个默认导出，但可以有多个（非默认）导出。

尝试在函数关键字前添加export，如export function BlogDescription() {

然后导入它们你会做import { BlogDescription } from './myFile'

【讨论】：

with 'export function BlogTrends(props){}' and export default { BlogTrends, BlogDescription }; bellow error iscoming :
元素类型无效：需要字符串（用于内置组件）或类/function（用于复合组件）但得到：对象。
并且没有export default { BlogTrends, BlogDescription }; 波纹管错误即将到来：
元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义.您可能忘记从定义组件的文件中导出组件，或者您可能已经......
你在哪里改的？

【解决方案2】：

导出默认值的漏洞在于，当另一个文件从该文件导入而没有指定名称时，它将回退到默认值，如果文件上有多个默认值，它会破坏这个目的，你想要的是导出每个函数，然后您可以将其中的一个作为模块的默认值，因此在您的情况下：

导出函数 BlogTrends(props) {

导出函数 BlogDescription() {

...

导出默认值 BlogTrends

然后你可以在你的导入文件上做：

import { BlogTrends } from 'pathToFile' ---> 导入 BlogTrends 函数。

import { BlogDescription } from 'pathToFile' ---> 导入 BlogDescription 函数。

import Default from 'pathToFile' ---> 导入 BlogTrends 函数。

参考：

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

【讨论】：

【解决方案3】：

导出多个函数

export default myMainFunc;
export { mySecondFunc };

【讨论】：