时间戳

首页 > 解决方案 > React Button 没有显示我声明的文本

javascript - React Button 没有显示我声明的文本

问题描述

目前，我遇到的问题是我编写了一个单词以显示在我的 HTML 网页上，但它没有显示。但是如果我在我的网络浏览器上使用检查并手动输入“注册”它就可以出现在主页上


import React, { useState } from 'react'
import {Link} from 'react-router-dom'
import {MdFingerprint} from 'react-icons/md'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'

function Navbar() {
    const [click,setClick]= useState(false);
    const [button,setButton]= useState(true)

    const handleClick = () => setClick(!click);
    //const closeMobileMenu = () => setClick(false)

    const showButton = () => {
        if (window.innerWidth <= 960){
            setButton(false)
        } else {
            setButton(true) 
        }
    }
    window.addEventListener('resize',showButton);
    return (
        <>
           <div className="navbar">
               <div className="navbar-container container">
                   <Link to='/Navbar1' className="navbar-logo">
                    <MdFingerprint className = "navbar-icon" />
                   UOW
                   </Link>
                   <div className="menu-icon" onClick={handleClick}>
                    {click ? <FaTimes/> : <FaBars/>}
                    
                    
                   </div>
                   <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                    <li className="nav-item">
                        <li className="nav-item">
                            <Link to='/' className="nav-links">
                                Home
                            </Link>
                        </li>
                        <li className="nav-item">
                            <Link to='/staff' className="nav-links">
                                Staff list
                            </Link>
                        </li>
                        <li className="nav-btn">
                            {button?(
                                <Link to="/sign-up" className='btn-link'>
                                    <Button buttonStyle='btn--outline'> SIGNUP </Button>
                                </Link>
                            ):(
                                <Link to="/sign-up" className='btn-link'>
                                    <Button buttonStyle="btn--outline" buttonSize='btn--mobile'> SIGNUP </Button>
                                </Link>
                         )}
                        </li>

                    </li>
                   </ul>
               </div>
            </div> 
        </>
    )
}


export default Navbar

如您所见，我可以制作一个按钮，但问题是即使在 google chrome 检查模式下，文本也不会显示在按钮上。我无法在结果中看到“SIGNUP”一词： 在此处输入图像描述

按钮中没有“注册”这个词

下面是我的 Button.js 代码

import React from 'react'
import './Button.css';

const STYLES= ['btn--primary', 'btn--outline']

const SIZES = ['btn--medium', 'btn--large', 'btn--mobile', 'btn--wide']

const COLOR = ['primary', 'blue', 'red', 'white']

export const Button = ({lecturer, type, onClick, buttonStyle, buttonSize,buttonColor}) =>{

    const checkButtonStyle=STYLES.includes(buttonStyle)? buttonStyle :STYLES[0]
    const checkButtonSize=STYLES.includes(buttonSize)? buttonSize :SIZES[0]
    const checkButtonColor=STYLES.includes(buttonColor)? buttonColor :COLOR[0]

    return (
        <button className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonColor} `  } onClick={onClick} type={type}>{lecturer}</button>
    )

}

标签： javascripthtmlreactjs

解决方案

好吧，您接受内部button文本作为道具名称 as lecturer，因此根据您的<Button>组件，您需要像这样将其字符串传递给它：

<Link to="/sign-up" className='btn-link'>
   <Button buttonStyle='btn--outline' lecturer='SIGNUP'></Button>
</Link>

注意：您可以在此处阅读有关道具和组件的更多信息。

推荐阅读