所以我試圖讓一個按鈕在其中顯示文本，但我很難。
import React from "react"
import './Button.css'
const STYLES =
[
'btn--primary',
'btn--outline'
]
const SIZES = [
'btn--medium',
'btn--large'
]
export const Button =({
child,
type,
onClick,
buttonStyle,
buttonSize
}) =>
{
const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]
return(
<button className={`btn ${checkButtonStyle} ${checkButtonSize}`} onClick={onClick}
type={type}>
{child}
</button>
)
}
如果我只是將純文本放在孩子所在的位置，它將顯示但如果我嘗試在我的導航欄中執行此操作，它只會制作一個沒有文本的按鈕。
import React, { Component } from 'react'
import {MenuItems} from './MenuItems'
import {Button} from '../Button.js'
import './Navbar.css'
class Navbar extends Component{
state = { clicked : false}
handleClick = () =>
{
this.setState({clicked: !this.state.clicked})
}
render()
{
return(
<nav className="NavBarItems">
<h1 className='navbar-logo'>React<i className='fab fa-react'></i></h1>
<div className='menu-icon' onClick={this.handleClick}>
<i className={this.state.clicked ? 'fas fa-times' : 'fas fa-bars'}></i>
</div>
<ul className={this.state.clicked ? 'nav-menu active':'nav-menu'}>
{MenuItems.map((item,index)=>{
return(
<li key={index}>
<a className={item.cname} href={item.url}>
{item.title}
</a>
</li>
)})}
</ul>
<Button>Sign Up</Button>
</nav>
);
}
}
export default Navbar
預先感謝任何有解決此問題的想法的人。
也很抱歉，我不知道正確的術語，我做了更多的 Python、Java 和 C 編碼，所以這對我來說是一個新世界。
uj5u.com熱心網友回復：
您可能希望在此處使用道具“兒童”而不是“兒童”作為您用例的官方資料型別，可以參考此了解更多資訊https://codeburst.io/a-quick-intro-to- reacts-props-children-cb3d2fce4891
因此，在這種情況下，您可以像這樣修改按鈕檔案：
import React from "react"
import './Button.css'
const STYLES =
[
'btn--primary',
'btn--outline'
]
const SIZES = [
'btn--medium',
'btn--large'
]
export const Button =({
children,
type,
onClick,
buttonStyle,
buttonSize
}) =>
{
const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]
return(
<button className={`btn ${checkButtonStyle} ${checkButtonSize}`} onClick={onClick}
type={type}>
{children}
</button>
)
}
uj5u.com熱心網友回復：
你需要使用內置屬性children，這個名字是按照慣例使用的，它總是復數。它將被設定為您在<Button>開始和結束標簽之間放置的任何內容。
換句話說，將child解構屬性重命名為childrenButton 組件中的標題 使用它的地方。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/389473.html
標籤：javascript 反应
上一篇：無法顯示使用document.createElement創建的不同影像
下一篇：如何在陣列子字串中搜索字串