如何将功能组件中的道具添加到类组件中？答案

【问题标题】：How to add a prop from a functional component into a class component?如何将功能组件中的道具添加到类组件中？
【发布时间】：2021-04-06 06:22:37
【问题描述】：

我有一个来自我的 LanguageFlag 组件的道具“语言”，它根据语言插入一个 SVG 图标（如下所示）。在一个普通的功能组件中，我会通过一个 prop in 传递语言，然后将它作为 language={language} 添加到组件中。

在这种情况下<LanguageTitleOptions language={this.props.language}/> 我读到我应该这样添加它。但是如何将语言属性传递给我的 LandingPage 组件？

着陆页组件

class LandingPage extends Component {
constructor(props) {
super(props);
this.state = {
formVisible: false,
earlyAccessSuccessVisible: false,
isMobile: this._getIsMobile(),
};
}


return (
<div className="buttons">
   <LanguageTitleOptions
      **language={this.props.language}/>**
      <LanguageSelector/>
   </LanguageTitleOptions>
</div>

LanguageFlag 组件

import React from "react";
import PropTypes from "prop-types";
import SpainFlag from "./SpainFlag";
import UKFlag from "./UKFlag";

const FLAGS = {
    es: SpainFlag,
    en: UKFlag,
};

const LanguageFlag = ({ language, ...otherProps }) => {
    if (!language) return null;

    const Flag = FLAGS[language];

    return <Flag {...otherProps} />;
};

LanguageFlag.propTypes = {
    language: PropTypes.oneOf(["es", "en"]),
};

export default LanguageFlag;

LandingPageContainer

imports....
....
....
import LandingPage from "./LandingPage";

const mapStateToProps = (state) => {
    return {
        rootItemId: state.rootItemId,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onRootItemAvailable: (rootItemId) => {
            history.replace(generateItemPath(rootItemId));
        },
        onEarlyAccessRegistration: () => {
            const anonymousId = getAnonymousId();

            Meteor.call(TRACK_USER_REGISTERED_EMAIL, anonymousId);
        },
    };
};

const LandingPageContainer = connect(mapStateToProps, mapDispatchToProps)(LandingPage);

export default LandingPageContainer;

LanguageTitleOptions 组件

import React, { useEffect, useRef, useState } from "react";
import LanguageFlag from "/imports/cuadds/client/components/pages/settings/graphics/LanguageFlag";
import { Trans } from "@lingui/macro";

const LanguageTitleOptions = ({ language, className, children }) => {
    const menu = useRef();
    const [open, setOpen] = useState(false);

    const handleClick = (e) => {
        setOpen(!open);
    };

    const onWindowClick = (e) => {
        // close menu if user clicked outside language selector menu element
        if (!menu.current.contains(e.target)) {
            setOpen(false);
        }
    };

    useEffect(() => {
        if (open) {
            window.addEventListener("click", onWindowClick);
        }
        return () => {
            window.removeEventListener("click", onWindowClick);
        };
    }, [open]);

    return (
        <div onClick={handleClick}>
            <div className={className}>
                <Trans>Language:</Trans>
                <LanguageFlag language={language} width={18} style={{ marginLeft: 9 }} />
                <i className="fa fa-angle-down"></i>
            </div>
            <div ref={menu}>{open && children}</div>
        </div>
    );
};

export default LanguageTitleOptions;

【问题讨论】：

什么是LanguageTitleOptions 组件？
可以给LandingPage的父母吗？
@Konstantin 是LandingPageContainer（我只是在底部加了）
@TaghiKhavari LanguageTitleOptions 是一个下拉菜单，您可以选择两种语言。
LandingPage 和 LanguageFlag 有什么关系？如果LandingPage 不是LanguageFlag 的后代，你就不能通过它。

标签： javascript reactjs react-props react-class-based-component

【解决方案1】：

传递 props 的方式与传递给函数组件的方式相同：

<LandingPage language={...}/>

【讨论】：