分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使 display:none 到特定文本的按钮？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何使 display:none 到特定文本的按钮？？

开发过程中遇到如何使 display:none 到特定文本的按钮？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何使 display:none 到特定文本的按钮？的解决方法建议，希望对你解决如何使 display:none 到特定文本的按钮？有所启发或帮助；

我想隐藏某些段落的按钮。但它显示所有段落的按钮。有两个文件。请帮我显示 index.Jsx 中显示的唯一 1 个段落的按钮

这是 NotificationPrevIEw.Jsx，它具有通知预览，其中应仅包含一个段落的按钮

import React,{ useState }from 'react'
import { StylednotificationPrevIEw } from '.'
import { Avatar } from '../../System'
import styled from "styled-components";

const theme = {
  orange: {
    default: "#dfaf68",hover: "#e78e18"
  },red:{
    default:"red",hover:"red"
  }
};
const button = styled.button`
  BACkground-color: ${(props) => theme[props.theme].default};
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  outline: 0;
  text-transform: uppercase;
  margin: 10px 0px;
  cursor: pointer;
  Box-shadow: 0px 2px 2px lightgray;
  Transition: ease BACkground-color 250ms;
  &:hover {
    BACkground-color: ${(props) => theme[props.theme].hover};
  }
  &:Disabled {
    cursor: default;
    opacity: 0.7;
  }
`;
button.defaultProps = {
  theme: "orange"
};

const button1 = styled.button`
  BACkground-color: ${(props) => theme[props.theme].default};
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  outline: 0;
  text-transform: uppercase;
  margin: 10px 0px;
  cursor: pointer;
  Box-shadow: 0px 2px 2px lightgray;
  Transition: ease BACkground-color 250ms;
  &:hover {
    BACkground-color: ${(props) => theme[props.theme].hover};
  }
  &:Disabled {
    cursor: default;
    opacity: 0.7;
  }
`;
button1.defaultProps = {
  theme: "red"
};

function clickMe(){
  alert("Clicked")
}



const NotificationPrevIEw = ({img,name,para,time,avatar,stream,accept,declinE}) => {
  const B = (props) => <span style={{FontWeight: '600'}}>{props.children}</span>
  const isBuzzedIn = true;

    return (
    
        <StylednotificationPrevIEw>
 <div classname="container">
              {/* <img classname="img1" src={img} style={{wIDth:'6%'}} /> */}
              <div classname="avatar">
                <Avatar size={40} url={avatar} alt="Profile picture" />
            </div>
              <div classname="prevIEwTextContainer">
            <span classname="paragraphText"><B>{name} </B></span>
            <span classname="paragraphText">{para}</span>
            <span classname="paragraphText"><B>{stream}</B></span>
            <div classname="btn"> 
        <button onClick={ClickME}>{accept}</button>
        {isBuzzedIn && <button style={{display:"none"}}/>}
        <button1 onClick={ClickME}>{declinE}</button1>
      </div>
     
            </div>
            <div classname="timeContainer">
            <span classname="time">{timE}</span>
            </div>
             
           
            
            
            
             
           
              
            </div>
        </StylednotificationPrevIEw>
  
           
           

          
    
    )
}

export default NotificationPrevIEw

在这个文件中，我从 components 文件夹中导入了通知预览，并且只想显示这个按钮来让你听到嗡嗡声。索引.Jsx

import styles from '../../../styles/Notification.module.CSS'
import React,{ useState,useEffect } from "react";

import Nav from '../../../components/Nav'
import {BodyLayout}  from '../../../components/BodyLayout';
import { Notification@R_404_6823@SIDebar } from '../../../components/Notification/Notification@R_404_6823@SIDebar'
import {NotificationPrevIEw} from '../../../components/Notification/NotificationPrevIEw'

const notifications = ({notification}) => {
 
  

    return (
      <>
      <Nav  />
      <BodyLayout height="90%">
          <div classname={styles.@R_404_6823@SIDebarContainer}>
            <Notification@R_404_6823@SIDebar name="Notifications" logo={notification?.data?.icon || "/"}  description="You can find all the recent notifications that you have received in this space. Also you can use the setTings section given below to control your application notifications."/>
          </div>

          <div classname={styles.notificationPagE}>
            <div classname={styles.notificationContainer}>
             <NotificationPrevIEw    avatar="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg"
             para="vIEwed your profile" time="45 sec ago" name="Alex EDWARDs"
             />
             <NotificationPrevIEw    avatar="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg"
             para="joined in a new Think Tank - " time="20 min ago" name="Yvonne Thompson" stream="ENGIneering"
             />
             <NotificationPrevIEw    avatar="https://images.pexels.com/photos/1043471/pexels-photo-1043471.jpeg"
             para="has buzzed you" time="Yesterday" name="Dominik Doudny" accept="Accept" decline="Decline"
             />
             <NotificationPrevIEw    avatar="https://images.pexels.com/photos/1382731/pexels-photo-1382731.jpeg"
             para="has commented on your post" time="Last week" name="LeAnne Simpson "
             

             />
             <NotificationPrevIEw    avatar="https://images.pexels.com/photos/678783/pexels-photo-678783.jpeg"
             para="has liked your post" time="Last week" name="Mónica Ribeiro"
             />
             <NotificationPrevIEw    avatar="https://images.pexels.com/photos/3779760/pexels-photo-3779760.jpeg"
             para="has added a new post in " time="6 months ago" name="JurrIEn oldhof"
             stream="Think Tank - Computer ScIEnce"
             />
            </div>
            
          </div>

         
        </BodyLayout>
      </>
    )
}

export default notifications