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

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

我有一个来自我的 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;

解决方法

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

;WITH XMLNAMESPACES('http://schemas.xmlsoap.org/soap/envelope/' AS S)
SELECT b.value('(./S:Fault/faultcode/text())[1]','Varchar(50)') AS [Name]
  FROM @xmlData.nodes('//S:Body') AS a (b);