reactjs - 如何将图标和文本传递给 React 中的按钮？

Question

我必须将一个图标和文本传递给一个按钮，而这个按钮在一个组件中，并且该组件名称在我的项目中是 ReusableButton。我的问题是我还有两个按钮样式相同的按钮，但图标和文本不同。因此，如果我知道如何将图标和文本传递给按钮，那么我就可以恢复该按钮组件。我会分享我的代码，所以请检查一遍。不过，如果我不清楚我的疑问，请
发表评论

这是 App.js

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

function App() {
  return (
    <div className="App">
      <Navbar></Navbar>
      <Button></Button>
    </div>
  );
}

export default App;

这是 App.css

I didn't apply any css in App.css

这是 Navbar.js

import React, { Component } from 'react';
import './Navbar.css';


class Navbar extends Component {
    render() {
        return (
            <div className='container-fluid'>
                <div className='row'>
                    <div className='col-6'>
                        <nav className="logoclass navbar navbar-expand-lg navbar-light">
                            <a className='hyperlinkStyle' href='www.facebook.com'>
                                <img className='logoStyle' src='assets/images/logo.png' alt='logo'></img>
                            </a>
                            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                <span className="navbar-toggler-icon"></span>
                            </button>
                        </nav>
                    </div>
                </div>
            </div>
        );
    }
}

export default Navbar

这是 Navbar.css

/* logoStyle css starts here */
.logoStyle {
    width:103px;
    margin-top: -4%;
    margin-left: 88%;
}
/* logoStyle css ends here */

/* this css used to remove dots in li of ul, starts here */
li {
    list-style-type: none;
}
/* ends here */

/* helpStyle css starts here */
.helpStyle {
    color: #00b2d6;
    cursor: pointer;
    font-size: .75rem;
    font-family: 'Roboto', sans-serif;
}
/* helpStyle css ends here */

.lione {
    display: inline-block;
}

.litwo {
    display: inline-block;
}

.lithree {
    display: inline-block;
}

.border {
    background-color: transparent;
    border-radius: 1%;
}

.english {
    color: #524c61;
    font-size: .75rem;
    font-family: 'Roboto', sans-serif;
    font-size: .75rem;
}

.flagStyle {
    height:.75rem;
    margin-left: .5em;
    margin-right: .25em;
    margin-top:-2.5%;
}

.rupeeStyle {
    margin-left: .5em;
    color: #b2aebd;
    font-size: .75rem;
}

.buttonStyle {
    background-color: transparent;
}

这是 Button.js

import React, { Component } from 'react';
import './Button.css'
import ReusableButton from '../ReusableButton/ReusableButton';

class Button extends Component {
    render() {
        return(
            <div className='container'>
                <div className='row'>
                    <div className='col-12'>
                        <ReusableButton></ReusableButton>
                    </div>
                </div>
            </div>
        )
    }
}


export default Button

这是 Button.css

I didn't apply any css in Button.css

我创建了这个组件来重用，这是 ReusableButton.js

import React, { Component } from 'react'
import './ReusableButton.css';


class ReusableButton extends Component {
   render() {
       return(
           <div className='button'>
               <button type='button' class='btn-primary buttonStyle'>Click here</button>
           </div>
       )
   }
}

export default ReusableButton

这是 ReusableButton.css

.buttonStyle {
    border: none;
}

我的目标是将图标和文本传递给按钮。

Answer 1

您可以简单地使用 props为了这。
在您的 Button.js , 像这样传递你想放在可重用按钮中的文本

<ReusableButton btnText="yourText"></ReusableButton>

然后假设您的图标是图像(不是 bootstrap glyphicons)，您首先导入所有这些图标并创建一个切换条件，该条件将根据您传递的文本呈现正确的图标。

import React, { Component } from 'react';
import './ReusableButton.css';
//import your icons here
import Icon1 from './dir/icon1.png';
import Icon2 from './dir/icon2.png';
import Icon3 from './dir/icon3.png';

class ReusableButton extends Component {

   //this function will identify what icon to render
   renderIcon = () => {
     switch(this.props.btnText) {
       case 'yourText1': return <Icon1 />;
       case 'yourText2': return <Icon2 />;
       case 'yourText3': return <Icon3 />;
     }
   }

   render() {
       return(
           <div className='button'>
               <button type='button' class='btn-primary buttonStyle'>
                  {this.renderIcon} {this.props.btnText}
               </button>
           </div>
       )
   }
}

export default ReusableButton;

另一种方法

另一种方法是从父 Button 传递图标和文本。像这样的 child 一样的组件

//import your icons at Button.js
import Icon1 from './dir/icon1.png';
import Icon2 from './dir/icon2.png';
import Icon3 from './dir/icon3.png';

然后将其作为 child 传递给您的可重用按钮，如下所示

<ReusableButton><Icon1 /> YourText1 </ReusableButton>
<ReusableButton><Icon2 /> YourText2 </ReusableButton>
<ReusableButton><Icon3 /> YourText3 </ReusableButton>

然后在您的 ReusableButton.js像这样使用它

render() {
       return(
           <div className='button'>
               <button type='button' class='btn-primary buttonStyle'>
                  {this.props.children}
               </button>
           </div>
       )
   }