在react的小项目中点击显示隐藏内容的写法

最新推荐文章于 2022-12-29 19:41:51 发布

原创最新推荐文章于 2022-12-29 19:41:51 发布 · 896 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文介绍了一个使用props控制显示与隐藏的列表组件实现方法，通过一个getListArea函数来根据props.focus的值决定是否渲染包含热门搜索的SearchInfo组件。

首先写一个方法：

const getListArea = (show) => {
    if(show) {
        return(
            <SearchInfo>
                <SearchInfoTittle>
                    热门搜索
                    <SearchInfoSwitch>换一批</SearchInfoSwitch>
                </SearchInfoTittle>
                <SearchInfoList>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                </SearchInfoList>
            </SearchInfo>
        )
    }else {
        return null;
    }
}