如何在 React 中使用 class name 条件渲染？

Question

import { display } from '@mui/system';
import React from 'react';
import "../user_config/user_page.css"

export default function FileUploadButton({showBtn, setShowBtn,value,...rest}) {
      const handelClick = () => {
       
        setShowBtn(false);
      };
        return (
            <div style={{ position: 'relative', display: 'inline-block' ,marginTop:'10px'}} className="big-size-file">
                <button  style={{  padding: '1px 12px', border: ' 1px solid #989797', borderRadius: '4px', color: '#727171',cursor:"pointer !important" }}>
                    {value && showBtn ? 'Replace file' : 'Choose file'}
                </button> 
                
                {value && showBtn?<span title={value} style={{fontSize: '9px', color: 'blue', marginLeft:'10px' }}>{value}<button  type="button"  onClick={handelClick} className="float-right  rounded-md text-blue-500 hover:text-gray-500 focus:outline-none " className={"big-size-file"?'marginTop:-17px':'margTop:11px'}>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    className="h-3 w-3 z-100"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"      
                                >
                                    <path
                                        fillRule="evenodd"
                                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                        clipRule="evenodd"
                                    />
                                </svg>
                            </button></span>:<span>No file chosen</span>}
                <input type='file' {...rest} className="fileStyle" style={{ position: 'absolute', zIndex: 2, opacity: 0, height: '100%', top: 0, bottom: 0, left: 0, right: 0 }} />
            </div>
        )
    }

还有big-size-fileCSS属性

    .big-size-file {
        max-width: 190px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
    }

我如何在条件渲染中使用 classname 如果类名是“大文件”，那么按钮 marginTop 是 -17px 否则 marginTop 11px?

Answer 1

您可以使用状态来存储您的初始默认值。制作两个具有不同样式的 css classes

const [sty,setSty]=useState("default css class name here")

如果你有一些事件然后改变它的状态设置class你的css.Now的名字对于你的其他部分只需改变状态或创建另一个状态来存储不同的名字css class

{value && showBtn?<span title={value} className={sty}>{value}<button  type="button"  onClick={handelClick} className="float-right  rounded-md text-blue-500 hover:text-gray-500 focus:outline-none " className={"big-size-file"?'marginTop:-17px':'margTop:11px'}>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-3 w-3 z-100"
                                viewBox="0 0 20 20"
                                fill="currentColor"      
                            >
                                <path
                                    fillRule="evenodd"
                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                    clipRule="evenodd"
                                />
                            </svg>
                        </button></span>:<span>No file chosen</span>}

如何在 React 中使用 class name 条件渲染？

How to use conditional rendering using class name in React?

conditional-statements

reactjs

conditional-rendering