我正在嘗試為我的 Button 組件添加一個額外的 className，但它沒有選擇新的 className。
我有一個 Button.js 類，其中包含
<button className= {`btn`} onClick = {onclick} type = {type}> {children}/button>
我正在從另一個檔案呼叫 Button 并且我試圖向該按鈕添加一個額外的 className 但它不起作用。
<div className="ticket">
<Button className="ticket"> Visit Now</Button>
</div>
當我檢查控制臺元素時，“立即訪問”按鈕只有 btn 的 className。
如何在此實體中添加額外的 className？我能得到一些幫助嗎？
uj5u.com熱心網友回復：
Button.js 應該是這樣的。
const Button = ({ className, onClick, type, children }) => (
<button className= {className} onClick={onClick} type={type}>{children}</button>
);
您可以按如下方式簡化。
const Button = props => <button {...props} />;
然后將其匯出Button為默認值。
export default Button;
uj5u.com熱心網友回復：
在您的 Button.js 類中，您必須分配一個您從另一個組件提供的外部類作為道具。
在你的 Button.js 類中，你必須像下面一樣更新你的代碼
如果功能組件
<button className= {`btn ${props.className}`} onClick = {onclick} type = {type}> {children}/button>
注意：- 確保使用 props 作為功能組件的引數
如果基于類的組件
<button className= {`btn ${this.props.className}`} onClick = {onclick} type = {type}> {children}/button>
uj5u.com熱心網友回復：
你可以做什么，你可以將classNameas傳遞props給你的button組件，并在那里使用它。
以下是如何實作此目標的示例：
// button.js
const Button = ({ onClick, type, children, className }) => {
return (
<button className={`btn ${className}`} onClick={onclick} type={type}>
{children}
</button>
);
};
export default Button;
在您的app.js檔案中，您可以className作為道具傳遞，如下所示：
// app.js
import Button from "./button";
const App = () => {
return (
<Button onClick={() => {}} type="text" className="abc def">
Click Me
</Button>
);
};
export default App;
uj5u.com熱心網友回復：
使用默認按鈕類和模板 string中 props 中傳遞的類名創建一個變數，然后將該變數用作className.
這是一個完整的作業示例。
function Button(props) {
const {
classname,
handleClick,
type,
children
} = props;
const classnames = `btn ${classname}`;
return (
<button
className={classnames}
onClick={handleClick}
type={type}
>{children}
</button>
);
}
function Example() {
function handleClick(e) {
console.log(e.target.textContent);
}
return (
<div>
<Button
classname="ticket"
type="button"
handleClick={handleClick}
>Click me</Button>
</div>
);
};
ReactDOM.render(
<Example />,
document.getElementById('react')
);.btn { border: 2px solid red; }
.ticket { background-color: #55dd44; }
.ticket:hover { background-color: #ff3377; border: 1px solid blue; cursor: pointer; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357355.html
標籤：javascript 反应