登录  /  注册

react中怎么禁止button渲染

藏色散人
发布: 2023-01-19 13:58:59
原创
1172人浏览过

react中禁止button渲染的方法:1、打开相应的js代码文件;2、找到“const flags = true;

react中怎么禁止button渲染

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react中怎么禁止button渲染?

react 中 button按钮的禁用和启用状态

disabled 为false 是启用状态

//  启用状态
    const flags = true;
    <Button disabled={flags}/>
登录后复制

disabled 为 true 是禁用状态

//  禁用状态
    <Button disabled/>
//  禁用状态2 变量控制
    const flags = false;
    <Button disabled={flags}/>
登录后复制

下面拓展聊聊React自定义组件--Button

这是主要js代码

import React, { Component } from &#39;react&#39;
import "./dist/index.css";
import PropTypes from "prop-types";
import classnames from "classnames";
class Button extends Component {
    constructor(props) {
        super(props);
        this.state = { }
    }
    handleClick = () => {
        if (!this.props.onClick) return;
        this.props.onClick();
    };
    render() { 
        //为了能让 Button 组件有多个样式选择,于是安装 classnames 插件来帮助切换类名来切换样式:
        const ClassName = classnames({  //根据父组件传进来的 size 来判断使用什么类名
            "btn": true,
            [`btn_${this.props.type}`]: true,
            [`btn_${this.props.size}`]: true,
            "btn_disabled": this.props.disabled,
            "btn_circle": this.props.circle,
        });
        return (
            <button
                className = {ClassName}
                onClick = {this.handleClick}
            >
                {this.props.children}
            </button>
         );
    }
}
//   组件的默认属性
Button.defaultProps = {
    children: "Button",
    type: "primary",
    size: "default",
    disabled: false,
    circle: false,
};
//   使用propTypes  进行组件属性的检查
Button.propTypes = {
    children: PropTypes.string,
    type: PropTypes.oneOf(["primary", "success", "warning", "danger", "info"]),
    size: PropTypes.oneOf(["default", "small", "large"]),
    disabled: PropTypes.bool,
    circle: PropTypes.bool,
};
 
export default Button;
登录后复制

这是样式代码

@bG-0: #fff;
@bF-1: #c0c4cc;
@PRIMARY: #409eff;
@SUCCESS: #67c23a;
@DANGER: #f65c6c;
@WARNING: #e6a23c;
@INFO: #909399;
@FONTSIZE: 14px;
@radius: 4px;
@btnBorderRadius: 4px;
@btnBorder: 1px solid transparent;
@btnMargin: 0 8px 12px 0;
@btnFontSize: 14px;
@btnLargeFontSize: 16px;
@btnSmallFontSize: 12px;
@btnPadding: 4px 15px;
@btnLargePadding: 6.4px 15px;
@btnSmallPadding: 1px 7px;
@btnDisabledCol: #909399;
.btn {
    width: 60px;
    height: 30px;
    border-radius: @btnBorderRadius;
    border: @btnBorder;
    outline: none;
    appearance: none;
    text-align: center;
    margin: @btnMargin;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-align: center;
    &_primary {
        background-color: @PRIMARY;
        color: @bG-0;
        &:hover {
            opacity: 0.8;
        }
    }
    &_success {
        background: @SUCCESS;
        color: @bG-0;
        &:hover {
            opacity: 0.8;
        }
    }
    &_danger {
        background: @DANGER;
        color: @bG-0;
        &:hover {
            opacity: 0.8;
        }
    }
    &_warning {
        background: @WARNING;
        color: @bG-0;
        &:hover {
            opacity: 0.8;
        }
    }
    &_info {
        background-color: @bG-0;
        color: black;
        border: 1px dashed #999;
        &:hover {
            opacity: 0.8;
        }
    }
    &_disabled {
        background-color: @bF-1;
        color: @btnDisabledCol;
        cursor: not-allowed;
        &:hover {
            opacity: 1;
        }
    }
    &_circle {
        padding: 0;
        font-size: 16px;
        text-align: center;
        width: 30px;
        height: 30px;
        overflow: hidden;
        border-radius: 50%;
        word-break: break-all;
    }
    &_large {
        font-size: @btnLargeFontSize;
    }
    &_default {
        font-size: @btnFontSize;
    }
    &_small {
        font-size: @btnSmallFontSize;
    }
}
登录后复制

最后引用示例

import &#39;./App.css&#39;;
import Button from &#39;./component/Button/index&#39;
function App() {
  const handleClick = () => {
    alert(&#39;我是组件&#39;);
  }
  return (
    <div className="App">
      <header className="App-header">
        <Button>查询</Button>
        <Button type = "success">成功</Button>
        <Button type = "warning">警告</Button>
        <Button type = "danger">失败</Button>
        <Button type = "info">灰色</Button>
        <Button onClick={ handleClick }>事件</Button>
        <Button size=&#39;default&#39;>small</Button>
        <Button size=&#39;small&#39;>small</Button>
        <Button size=&#39;large&#39;>small</Button>
        <Button disabled={true} >a</Button>
        <Button size=&#39;default&#39; circle={true} >a</Button>
        <Button size=&#39;small&#39; circle={true} >a</Button>
        <Button size=&#39;large&#39; circle={true} >a</Button>
      </header>
    </div>
  );
}
export default App;
登录后复制

成果

bb849d54690facc88175651a2a41cce.jpg

给自己留个印象 还有很多不足的地方 希望大家一起进步

推荐学习:《react视频教程

以上就是react中怎么禁止button渲染的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号