将 props 和其他属性与 react 组件定义一起使用

Question

我已经创建了一个反应组件，并且正在其他组件中重用它。

<SC_Button label = "English" btnStyle = "sc-btn-default--sinhala mb-2" onClick={this.handleClick}/>

但是在onClick上定义的函数不会执行，因为它带有传递给组件的props。我想反应也会将 onClick 作为道具读取。我对反应很陌生。

下面的方式工作。但是由于样式问题，我不想用额外的div 包装我的反应组件。

<div onClick={this.handleClick} >
<SC_Button label = "English" btnStyle = "sc-btn-default--sinhala mb-2"/>
</div>

有没有办法在反应组件定义中使用 props 和其他属性？

编辑：

父组件

import React from 'react';
import { withRouter } from "react-router-dom";
import SC_Button from '../components/button';
class Home extends React.Component {
handleClick = () => {
this.props.history.push('/page2');
}
render() {
return (
<div className="container-fluid">
<div className="row sc-overlay sc-overlay-main">
<div className="col-md-12 col-xl-5 offset-xl-1">
<span className = "sc-overlay-main__left">
<span className = "sc-main-image">
<img src={require('../assets/dialog_logo.png')} />
</span>
<h1 className="mt-4">Welcome to MyDialog</h1>
</span>
</div>
<div className="col-md-12 col-xl-5">
<div className="row sc-overlay-main__right">
<label>Choose your preferred language</label>
<SC_Button label = "සිංහල" btnStyle = "sc-btn-default--sinhala mb-2" onClick={this.handleClick}/>
<SC_Button label = "தமிழ்" btnStyle = "sc-btn-default--tamil mb-2" />
<SC_Button label = "English" btnStyle = "sc-btn-default--english mb-2" />
</div>
</div>
</div>
</div>
);
}
}
export default withRouter(Home);

SC_Button组件

import React from 'react';
import { withRouter } from "react-router-dom";
class SC_Button extends React.Component{
constructor(props) {
super(props);
}
render() {
return (
<button type="button" className={`sc-btn-default ${ this.props.btnStyle }`}>{this.props.label}</button>
);
}
}
export default withRouter(SC_Button);

Answer 1

您的<SC_Button />组件或您创建的任何自定义组件不会自动实现事件处理程序。你基本上只是给了它另一个道具，叫做onClick，它只是扔掉了。你必须在它返回的 DOM 元素中使用你传递它的回调：

SC_Button.js

import React from 'react';
import { withRouter } from "react-router-dom";
class SC_Button extends React.Component{
constructor(props) {
super(props);
}

render() {
return (
<button 
type="button"
className={`sc-btn-default ${ this.props.btnStyle }`} 
onClick={this.props.handleClick}
>
{this.props.label}
</button>
);
}
}
export default withRouter(SC_Button);

无需在组件中定义handleClick函数，因为每次实例化函数时都会将其作为 prop 传递。这允许不同的实例具有不同的行为。