Question

我尝试不在组件中使用export default，而是使用export function..

我的组件的结构如下：

function Hero(props) {
  return (
    <section className="hero">
        <div className="wrapper">
            <div className="content">
                <h1>{props.title}</h1>
                <p>{props.text}</p>
            </div>
        </div>
    </section>
);
}

export default Hero;

当我做import {Hero} from './components/hero/hero.js'时，此组件可以正常工作，但是，如果我有一个正在接受道具的组件。像这样，它不起作用：


export function Chart() {
    return (
        <section className="chart">
            <div className="wrapper">
                <h2>{this.props.children}</h2>
                <div className="img-container">
                    <img className="desktop" src={chart} />
                    <img className="mobile" src={mobileChart} />
                </div>
            </div>
        </section>
    );
}

我正在尝试避免使用export default并避免使用类似的东西

class Chart extends React.Component {
    render() {
        return (
            <section className="chart">
                <div className="wrapper">
                    <h2>{this.props.children}</h2>
                    <div className="img-container">
                        <img className="desktop" src={chart} alt="Mortgage Rate Comparison Chart"/>
                        <img className="mobile" src={mobileChart} alt="Mortgage Rate Comparison Chart"/>
                    </div>
                </div>
            </section>
        );
    }
}

export default Chart;

当我尝试切换此设置时，出现错误，我不确定以这种方式导出的正确语法。这是我的主要开发人员提出的要求，他本周不在办公室。

Answer 1

如果每个模块只有一个模型，则根据ECMAScript

首选默认导出

如果文件中的代码是这样的：

ChartComponent.js

export function Chart(props) {
    return (
        <section className="chart">
            <div className="wrapper">
                <h2>{props.children}</h2>
                <div className="img-container">
                    <img className="desktop" src={chart} />
                    <img className="mobile" src={mobileChart} />
                </div>
            </div>
        </section>
    );
}

您必须以这种方式导入它：

使用导出默认设置

import Chart from "./ChartComponent";

没有导出默认设置

import { Chart } from "./ChartComponent";


<Chart>
  <div>
    child elements
  </div>
</Chart>

如果您正在听道具，这会将孩子们带入您的组件。

如果单个文件中有多个组件，则可以通过以下方式导出它们：

ExampleMultipleComponents.js

export const ComponentI = class ComponentI extends React.Component {....};
export const ComponentII = () => (<div> ... </div>);

或类似的

const ComponentI = class ComponentI extends React.Component {....};
const ComponentII = () => (<div> ... </div>);

export {
  ComponentII,
  ComponentI,
}

他们将它们导入为：

import { ComponentI, ComponentII } from './ExampleMultipleComponents';

希望这会有所帮助！

没有出口默认值的情况下如何构造组件出口？

1 个答案: