#reactjs #export
Вопрос:
Я только начинаю изучать реакцию, поэтому прошу прощения, если задал такой простой вопрос. Я попытался решить это сообщение об ошибке «не содержит экспорта по умолчанию(импортируется как «Основной»), хотя я записываю нижнюю часть файла экспорт основного по умолчанию. Не могли бы вы проверить, какую часть я пропустил?
Я поделюсь своим кодом ниже
import React, {Component} from "react";
import "./Main.css";
class Main extends Component {
render() {
return (
<div>
<div class="wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input class="search-box" type="text" placeholder="amp;#xF002; Search", style="font-family:Arial, FontAwesome" />
<div class="icons">
<img id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png" />
<img id="heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" />
<img id="my-page" src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png" />
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi" src="../src/images/about.png" />
<span class="name"> Jiwan Jeon </span>
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</div>
<div class="pic">
<img src="../src/images/ucscPic.png" />
</div>
<div class="show-box">
<div class="reaction-icons">
<i class="fa fa-comment-o"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-send-o"></i>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="like-counts">
<span>like 4,000</span>
<div>
<div class="check-comments">
<span>UC Santa Cruz will continue to offer most courses remotely or online for spring and summer 2021, providing in-person instruction for a small</span>
<a id="space" href="">expanding</a><br />
<a href="">Check the all comments</a>
<ul class="feed-comments">
<li>test</li>
</ul>
</div>
</div>
<div class="comment">
<i class="fa fa-smile-o"></i>
<input class="user-input" type="text" placeholder="Add Comment..." />
<button class="post">Post</button>
</div>
</div>
</div>
<div class="main-right">
<div class="top">
<img class="selfi" src="../src/images/about.png" />
<div class="main-right-name">
<span id="eng-name">JiwanJeon94</span><br />
<span id="kr-name">전지완</span>
</div>
<a href="">Transform</a>
</div>
<div class="middle">
<div class="middle-words">
<span id="recommendation">Suggestions For You</span>
<a href="" id="view-all">view all</a>
</div>
<div class="recommendation-people">
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
</div>
</div>
<div class="footer">
<div class="footer-top">
<a href="">About</a>
<a href="">Help</a>
<a href="">press</a>
<a href="">API</a>
<a href="">Jobs</a>
<a href="">Privacy</a>
<a href="">Terms</a>
<a href="">Locations</a>
<a href="">TopAccounts</a>
<a href="">Hashtags</a>
<a href="">Language</a><br /><br />
</div>
<span>2021 INSTAGRAM FROM FACEBOOK</span>
</div>
</div>
);
}
}
export default Main;
Ответ №1:
Я думаю, вам просто нужно убедиться, что все ваши html-теги закрыты правильно. Например, в .like-counts div вы закрываете его <div> элементом a, а не a </div> . Также убедитесь, что все ваши разрывы строк самозакрываются. Например, используйте <br /> вместо. <br> Открытие кода в таком редакторе, как VS-code, довольно полезно и выделит некоторые из ваших ошибок.
Комментарии:
1. Спасибо, что помогли мне! Я закрыл все теги div с помощью /div и br /. Я также проверяю код vs, но… Я не уверен… почему он по-прежнему показывает одно и то же сообщение об ошибке..
2. Вы также удалили запятую во
.search-boxвходных данных (послеplaceholderатрибута)? Если в VS-коде нет красных индикаторов ошибок, было бы полезно узнать немного больше о запущенном коде, например, какую версию node/npm вы используете? Вы вообще используете Вавилон? Вы создали это с помощью приложения create-react-app? Возможно, вы используете версию, которая не поддерживает синтаксис ES6, и в этом случае вам нужно будет использоватьmodule.exports = Mainвместоexport default Main3. О, когда я меняю файл на jsx, он показывает, что у » div » нет соответствующего закрывающего тега. в vs-коде. В верхней части div и div-оболочки и основного div. Тем не менее, я закрыл с помощью закрывающего тега ниже, но я не уверен, почему код vs не поймал его…
4. Ах да, извините, я забыл указать на это — вам нужно будет настроить свой редактор на jsx или tsx (если вы используете typescript), чтобы найти эти ошибки.
5. Большое вам спасибо за то, что помогли мне @matt.main! Ты экономишь мое время! 🙂 Я боролся с этой проблемой в течение нескольких часов 🙁