Как использовать несколько «экспорт по умолчанию» в реакции

Question

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

Answer 1

Точка дыры экспортного значения по умолчанию заключается в том, что когда другой файл импортируется из этого файла без указания имени, он возвращается к значению по умолчанию, если в файле было несколько значений по умолчанию, это противоречило бы этой цели.Чтобы экспортировать каждую функцию, вы можете использовать один из них в качестве значения по умолчанию для модуля, поэтому в вашем случае:

---

export функция BlogTrends (props) {

экспорт функция BlogDescription () {

...

экспорт по умолчанию BlogTrends

---

Затем в вашем импортируемом файле вы можете сделать:

import {BlogTrends} из 'pathToFile' ---> импортировать функцию BlogTrends.

import {BlogDescription} из 'pathToFile' --> импортирует функцию BlogDescription.

import По умолчанию из 'pathToFile' ---> импортирует функцию BlogTrends.

---

Ссылка:

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

Answer 2

Вы не можете иметь несколько экспортов по умолчанию, но вы можете иметь несколько (не по умолчанию) экспортов.

Попробуйте добавить export перед ключевыми словами функции, например export function BlogDescription() {

Затем, чтобы импортировать их, вы должны сделать import { BlogDescription } from './myFile'