//ActButton.js
const ActButton = ({label}) => {
return (
<div className="ActButton">
<div className="ActButton__LeftButton">
Agir
</div>
<div className="ActButton__RightButton">
<img src="plume.svg" />
{label}
</div>
</div> );
};
export default ActButton;
//scripts.js
document.querySelector('.ActButton').addEventListener('click', e => {
//Do stuff
});
Utiliser React comme moteur de template c’est comme aller au McDonalds pour prendre une salade.
-- Albert Einstein
import React, {PropTypes} from 'react';
import Svg from 'react-inlinesvg';
const styles = require('./ActButton.scss');
const ActButton = ({action, label}) => {
return (
<div onClick={action} className={styles.ActButton}>
<div className={styles.LeftButton}>
Agir
</div>
<div className={styles.RightButton}>
<Svg src={`/assets/images/plume.svg`} />
{label}
</div>
</div>
);
};
ActButton.propTypes = {
action: PropTypes.func.isRequired,
label: PropTypes.string,
};
export default ActButton;
//Dans le parent
this._onActButtonClick = (e) => {
//Do stuff
}
<ActButton
label="Click me"
onClick={this._onActButtonClick}
/>