时间戳

首页 > 解决方案 > export default 中的 props 有什么作用？

javascript - export default 中的 props 有什么作用？

问题描述

嗨，我现在正在学习 React，我看到了这段代码

import React from "react";
import {Component} from "react";

import {BackstageTheme} from '@backstage/theme'


const useStyles = makeStyles<BackstageTheme>(() =>
    createStyles({
        someStyle: {
            position: 'relative',
        }
    }),
);

class MyComponent extends Component<any, any> {

    constructor(props) {
        super(props);
    }


    componentWillReceiveProps(props) {
        this.fetchData(props.filters);
    }

    public componentDidMount() {

        this.fetchData(null);
    }

    public fetchData(filters) {
        // fetch data thru API
    }


    public render() {
       
        const classes = this.props.classes;
        return (
            //layout..


        );
    }
}

export default (props) => {
    const classes = useStyles();
    return (
        <MyComponent classes={classes} filters={props.filters}/>
    )
}

我很困惑，在底部，导出默认值，，

为什么要传递一个props，为什么有filters={props.filters}？

我可以删除filters={props.filters}吗？

我可以只 导出默认 MyComponent吗？

如果这仍然适用于export default MyComponent，那么传递一个道具有什么区别？？？

标签： javascriptreactjses6-modules

解决方案

在代码底部导出的函数只是另一个函数组件，每个 React Funciton 组件都必须接收作为参数props，这是一个包含传递给组件的所有属性的对象。

这是一个与props考虑您有这样的HelloWord组件定义相关的示例

function (props) {
    return <p>Hello World</>
}

当你像这样在 JSX 中使用这个组件时

<HelloWorld name="John Doe"/>

传递给上述函数定义的props参数将等于{"name": "John Doe", ...}您可以在此处了解有关组件和道具的更多信息

考虑到您提供的代码在文件名中MyComponent.js，当您导入此文件而不从您获得的文件中解构导出数据时，就是导出的组件。了解有关ES6 模块默认导出的更多信息

import MyComponent from './MyComponent';

此行将准确返回默认导出的功能组件，即

export default (props) => {
    const classes = useStyles();
    return (
        <MyComponent classes={classes} filters={props.filters}/>
    )
}

与props.filters您可以删除如果但MyComponent您在代码中定义的期望有一个道具名称相关filters，您可以在此处看到

componentWillReceiveProps(props) {
    this.fetchData(props.filters);
}

Filter 属性用于在 Lifecycle 方法中获取一些数据componentWillReceiveProps。

你可以， export default MyComponent但你必须传递classes和filters道具，因为它们在代码中使用MyComponent它会和这里完全一样

return (
    <MyComponent classes={classes} filters={props.filters}/>
)

推荐阅读