Как экспортировать более одного компонента класса с помощью React JS?
Я новичок в React и хотел бы сохранить все мои компоненты в одном файле. Как мне экспортировать более одного компонента и сохранить их в одном файле?
import React, { Component } from "react";
class MyText extends Component {
render() {
return (<div>
<h1>
Component</h1>
<p>This class component is named MyText. I can re-use it's code by simply Rendering (fancy name for calling) it by it's class name and I won't have to re type it, however many times I will need it.</p>
</div>);
};
}
class GreetName extends Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>;
</div>
);
};
}
export default MyText;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вместо того, чтобы использовать строку export default внизу, вы можете поместить экспорт перед каждым определением класса, например export class GreetName..., а затем, чтобы включить свои классы в другой файл, вы можете использовать import {MyText, GreetName} from 'your/file.js'
Звучит неплохо! Я тоже новичок в переполнении стека, как мне закрыть вопрос и отдать вам должное?
не закрывайте вопрос и не отмечайте его как принятый ответ.
Вы можете сделать так, как сказал Джесс Кенни, или использовать экспорт имен в нижней части файла:
SomeComponent.js
import React, { Component } from "react";
class MyText extends Component {
render() {
return (<div>
<h1>
Component</h1>
<p>This class component is named MyText. I can re-use it's code by simply Rendering (fancy name for calling) it by it's class name and I won't have to re type it, however many times I will need it.</p>
</div>);
};
}
class GreetName extends Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>;
</div>
);
};
}
export { MyText, GreetName };
А затем используйте это как:
import { MyText, GreetName } from './SomeComponent'
Я советую вам использовать один компонент для каждого файла, чтобы вы могли сохранить свой проект модульным. В ReactJS существует соглашение об экспорте одного компонента из файла и экспорте его в качестве экспорта по умолчанию.
Если это вспомогательный компонент, который используется только в конкретном случае, вы можете поместить его в тот же файл, что и функциональный компонент.
вау, правда? Просто кажется, что будет много лишних файлов. Я до сих пор не понимаю, почему, но я только начинаю работать с React, поэтому я уверен, что позже столкнусь с причиной, когда буду создавать более крупное приложение.
@TonyCarbetta Да. Следуя принципу Единственная ответственность, каждый компонент в идеале должен выполнять только одно действие. Если он в конце концов вырастет, его следует разложить на более мелкие подкомпоненты. Вы можете прочитать статью это в документации, и, возможно, это поможет вам понять.
export default secretContext;
export {taskData};
для экспорта двух функциональных компонентов
сделайте это в app.js
export default App;
export{New_component};
сделайте это в index.js
import App from './App';
import {Hari} from './App';
<App name = {people.name}/>
<New_component msg = {people.msg}/>
убедитесь, что имя компонента начинается с заглавной буквы
Возможный дубликат Несколько компонентов React в одном модуле