在下面的例子中,初始图标将被呈现,但当类别改变时,它不会发生变化。
const Circle = ({ filled, onClick }) => {
const className = filled ? 'fas fa-circle' : 'far fa-circle';
return (
<div onClick={onClick} >
<i className={className} />
<p>(class is {className})</p>
</div>
);
};
class App extends React.Component {
state = { filled: false };
handleClick = () => {
this.setState({ filled: !this.state.filled });
};
render() {
return <Circle filled={this.state.filled} onClick={this.handleClick} />;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>