如果没有元素就让出现提示，confirmmodal，portal，过滤日志

pqxpq

于 2022-10-14 15:29:46 发布

阅读量337

点赞数

分类专栏：后端学不走之react 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/qq_52563729/article/details/127313311

版权

后端学不走之react 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

如果没有元素就让出现提示

js数组不管有没有元素返回的都是true，所以我们只能判断他的长度

    if(logItemData.length===0){
        logItemData=<p className="no-logs">没有找到日志</p>
    }
    return <Card className="logs">
    {
        logItemData
    }

confirmmodal,自己定义确认框窗口，动态显示组件！！

const LogItem = (props) => {
  //添加一个state记录是否显示我们的确认窗口
   //默认值设置为false，表示为不显示窗口
  const[showConfirm,setShowConfirm]=useState(false);
  const deleteItemHandler=()=>{
    //当他为true的时候我们显示这个窗口
    setShowConfirm(true);

  }
  //取消函数
  const canceHandler=()=>{
    setShowConfirm(false)
  }
  //确定函数
  const okHandler=()=>{
    props.onDelLog();
  }
  return (
    <Card className="item">
    {/*只有showconfirm为true的时候才显示窗口*/}
    {showConfirm && <ConfirmModal 
    confirmText="该操作不可以恢复，确认吗？"
    onCancel={canceHandler}
    onOk={okHandler}
    />}

    <MyDate date={props.date}/>
    {/**日志内容容器 */}
    <div className="content">
        <h2 className='desc'> {props.desc}</h2>
        <div className='time'> {props.time}</div>
    </div>
    
    <div>
      <div onClick={deleteItemHandler} className={'delete'}>x</div>
    </div>
    </Card>
  )
}

import "./ConfirmModal.css";
import Card from '../Card/Card.js'
import BackDrop from '../BackDrop/BackDrop'
const ConfirmModal=(props)=>{
    return <BackDrop>
        <Card className="ConfirmModal">
       <div className="confirmText">
       <p>{props.confirmText}</p>
       </div>
       <div className="confirmButton">
        <button onClick={props.onOk}>确认</button>
        <button onClick={props.onCancel}>取消</button>
       </div>
    </Card>
    </BackDrop>
}

export default ConfirmModal

设置蒙版

在这里插入图片描述

层级元素，层级一样的话就会后面的盖住前面的。而且如果父元素盖不住别人子元素层级9999都盖不住别人

为什么会出现这个问题！！！？

我们的遮罩应该覆盖所有的网页，不应该与logitem有祖先和后代的关系

解决办法:portal

在React中，父组件引入子组件后，子组件会直接在父组件内部渲染。换句话说，React元素中的子组件，在DOM中,也会是其父组件对应DOM的后代元素。

但是，在有些场景下如果将子组件直接渲染为父组件的后代，在网页显示时会出现一些问题。比如，需要在React中添加一个会盖住其他元素的Backdrop组件, Backdrop显示后，页面中所有的元素都会被遮盖。很显然这里需要用到定位，但是如果将遮罩层直接在当前组件中渲染的话，遮罩层会成为当前组件的后代元素。如果此时，当前元素后边的兄弟元素中有开启定位的情况出现，且层级不低于当前元

使用方法

1.在index.html中添加一个新的元素

在这里插入图片描述