react隐藏按钮的实现方法：1、利用状态机设置“display_name”；2、将控件按钮放在div中进行呈现；3、通过修改状态机“display_name”的取值，来控制按钮的呈现与隐藏即可。
本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
react怎么隐藏按钮？
react中通过diaplay实现控件按钮的呈现与隐藏
1、实现效果通过单击编辑图标实现页面中对应按钮的呈现与隐藏、效果图如下
2、代码实现import react, { component } from 'react';import '../../../style_css/antd.css';import { layout,icon,row, col} from 'antd';class index extends component {    // 状态机    constructor(props, context) {        super(props, context);        this.state = {            display_name: 'none', //此状态机为display的取值        }    }    display_name() { //编辑按钮的单击事件，修改状态机display_name的取值        if (this.state.display_name == 'none') {            this.setstate({                display_name: 'block',            })        }        else if (this.state.display_name == 'block') {            this.setstate({                display_name: 'none',            })        }    }    render() {        return (            <layout>                {/* 一行：按钮 */}                <div style={{ background: '#fff', paddingtop: '20px', display: this.state.display_name }}>    {/* 通过状态机display_name获取diaplay取值 */}                    <row>                        <col span={12}>                        </col>                        <col span={12}>                            <div style={{ float: 'right' }}>                                <span style={{ paddingleft: '5px' }}><button style={buttoncolor} size="large">详情</button> </span>                                <span style={{ paddingleft: '5px' }}><button style={buttoncolor} size="large">添加</button></span>                                <span style={{ paddingleft: '5px' }}><button style={buttoncolor} size="large">修改</button></span>                                <span style={{ paddingleft: '5px' }}><button style={buttoncolor} size="large" >删除</button></span>                                <span style={{ paddingleft: '5px', paddingright: '10px' }}><button style={buttoncolor} size="large">查看关联</button></span>                            </div>                        </col>                    </row>                </div>                {/* 通过icon实现编辑图标 */}                <div style={{ background: '#fff', paddingtop: '10px' }}>                    <row>                        <col span={23}>                        </col>                        <col span={1} onclick={this.display_name.bind(this)}> {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */}                            <icon type='edit' style={{ fontsize: '30px' }} />                        </col>                    </row>                </div>                {/* 页面内容 */}                <layout style={{ padding: '10px 0', background: '#fff' }}>                    <content style={{ padding: '0 24px', minheight: 280 }}>                        {this.props.children}                    </content>                </layout>            </layout>        );    }}export default index;
display属性可以控制内容的呈现与隐藏，none表示隐藏，block表示呈现第一步：利用状态机设置display_name第二步：控件按钮放在div中进行呈现，div内容的呈现与否通过display实现，display具体取值取状态机中的display_name第三步：给编辑图标添加单击事件：修改状态机display_name的取值，状态机一旦改变页面便会立即加载，即控制按钮的呈现与隐藏推荐学习：《react视频教程》
以上就是react怎么隐藏按钮的详细内容。