React_class组件调用点击方法和函数组件调用点击方法的区别

1. 需求背景

在学习React过程中，发现函数组件和class组件在一些情况下都是支持的。使用组件定义了如下页面，下面是一个循环的列表，想要进行的操作是点击具体的某一项元素，根据其id跳转至对应的页面

2. 函数式组件实现方式

因为函数式组件中的this与class组件中的this指向不同，所以无法使用this.方法名称.bind(this, 参数)的形式，查看文档，发现Hook中useState、useEffect可以解决我的问题

• 首先，定义对应的要操作id的初始值和设置这个值的方法 const [initialId, setInitialId] = useState(null);
• 第二，在点击事件执行时绑定更新数据的方法setInitialId，并将最新的值传入，修改initialId当前值 onClick={() => setInitialId(item.id)
• 第三，当数据发生变化时会触发useEffect，在其中调用我们希望的方法类似于watch

完成上述操作后，我们想要的结果就达成了，下面看全部代码

import './index.css'
import { useState, useEffect } from 'react';  // 引入所需Hook函数
function ArticleContentList(props) {
    const [initialId, setInitialId] = useState(null); // 定义初始值initialId为null，之后更新时initialId会变为最新的值
    useEffect(() => {
        // 当initialId值发生变化时，调用这个方法
        toArticleDetail(initialId)
    })
    const list = props.list
    return (
        <ul className="content_padding">
            {
                list && list.length && list.map((item, index) => { // item为循环数组中的每一项数据，保证点击时对应的是当前数据
                    return (
                        <li className='content_item' key={index} onClick={() => setInitialId(item.id)}>{index + 1}.{item.title}</li>
                    )
                })
            }
        </ul>
    )
}
function toArticleDetail(jumpId) {
    if(!jumpId) return
    console.log(jumpId, '对应跳转id') // 之后可以根据这个id进行后续的跳转操作等
}

export default ArticleContentList

3. class组件实现方式

class实现方式从理解上我认为比function组件要更容易些

• 首先，在点击时这样定义执行函数this.toArticleDetail.bind(this, item.id)，即this.调用方法.bind(this, 参数)
• 第二，定义执行方法 toArticleDetail(jumpId) {}

以上两步即可轻松完成对于方法的调用和参数的传递，完整代码如下：

import { Component } from 'react';
import './index.css'
export default class ArticleContentList extends Component{
    toArticleDetail(jumpId) {
        console.log(jumpId, '对应跳转id')
    }
    render() {
        const list = this.props.list
        return (
            <ul className="content_padding">
                {
                    list && list.length && list.map((item, index) => {
                        return (
                            <li className='content_item' key={index} onClick={this.toArticleDetail.bind(this, item.id)}>{index + 1}.{item.title}</li>
                        )
                    })
                }
            </ul>
        )
    }
}

以上就是我在实践中对于函数组件、class组件调用函数传递参数所总结的内容，无论是从写法上还是理解上似乎Class组件会更适合更简便些，大家可以根据自己的喜好挑选自己喜欢的方法

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~