在 react 组件定义中使用 props 和其他属性

Posted 2023-02-23

【中文标题】在 react 组件定义中使用 props 和其他属性

【英文标题】：Using props and other attributes with react component definition

【发布时间】：2020-04-24 13:51:47

【问题描述】：

我创建了一个 react 组件，并在其他组件中重用它。

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

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

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

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

有没有办法？

编辑：

父组件

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);

【问题讨论】：

你在处理 onClick 你的反应组件吗？

像这样发出警报 如果看到 onClick 是问题还是您的功能。我认为你必须删除它。

@uday 我在父组件中使用 onClick。

你能用<SC_Button />代码更新你的问题吗？

@AnilKumar 它有效。但是在页面加载时，不是一次我点击按钮

【参考方案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 函数，因为每次实例化时都会将它作为道具传递。这允许不同的实例有不同的行为。

【讨论】：

由于 SC_Button 是一个可重用的组件，它的 onclick 功能正在逐页更改。因此，我想在我们使用 SC_Button 组件的组件中实现 onclick 功能，而不是在 SC_Button 组件中。如果我错了，请纠正我。

没错！每当您使用这些组件之一时，您都需要向它传递一个在单击时将使用的函数：<SC_Button onClick=() => console.log('You clicked me!' btnStyle=styles.something label="aButton" />