Question

我有一个具有全局导航功能的项目。导航栏中有一个按钮，该按钮应能够隐藏“ en”类的某些元素。

在nav.js文件内部

这是按钮的代码

<Button id="switch-lang" onClick={translate}>ENGLISH</Button>

这是我目前拥有的功能

function translate(){
        const handleSwitchLang = (dataLang) => {
            if (lang === switchedLang){
                setSwitchLang('');
            } else {
                setSwitchLang(dataLang);
            }
        };
    }

在context.js

中

export const SwitchLangContext = createContext();

以及我的homecontent.js


    const [switchedLang, setSwitchLang = useState(true);

    const context = useContext(SwitchLangContext);

这应该是我要隐藏的div

<div className="en">
 This is my planned content
</div>

我不太确定如何在React Hooks中隐藏类为'en'的元素。我做了类似的事情，但它在同一文件中。现在这些文件位于两个不同的文件中，我不确定如何。

Answer 1

一种基于道具隐藏元素的方法是：

const MyComponent = (props) => {
    const contentNode = null;
    if (props.switchedLang === true) {
        contentNode = (
            <div className="en">
                This is my planned content
            </div>
        );
    }

    return (
        <React.Fragment>
            {contentNode}  
        </React.Fragment>
    );
}

或者，可以将CSS类应用于隐藏它们的父类。

.lang-switched .en {
    visibility: hidden;
    // or
    display: none;
}

然后

<div className={`content${props.switchedLang && ' lang-switched')`}>
    <div className="en">
        This is my planned content
    </div>
    ...
</div>

React Hooks：隐藏/显示其他组件中的元素

1 个答案: