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

Question

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

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

但是在 onClick 处定义的函数不会执行，因为它带有传递给组件的 props。我想 React 也将 onClick 读取为一个道具。我的反应还很新。

以下方法有效。但由于样式问题，我不想用额外的 div 包装我的反应组件。

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

有什么方法可以在 React 组件定义中使用 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 元素中使用传递给它的回调 returns:

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 传递。这允许不同的实例有不同的行为。

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

Using props and other attributes with react component definition

components

reactjs

react-props