React中如何向点击事件处理函数传递动态组件props参数

嘿，我来帮你搞定这个React组件间的点击事件传参问题！先看看你代码里的几个小坑，然后一步步修正：

首先，梳理原代码里的错误点 #

1. ClassResult组件语法错误：你在constructor里重复设置了this.state，还把render方法写在了constructor的return里，这完全不符合React类组件的语法规范。
2. StudentResult组件绑定问题：在constructor里绑定displayDetailResult时，直接用了schoolid和regno变量，但这两个变量在当前作用域未定义（应该通过this.props获取）；就算写成this.props.schoolid，后续props更新时绑定的参数也不会同步。
3. render里调用setState：在render方法里调用this.setState会触发无限重渲染循环——setState会重新调用render，render又触发setState，循环往复。
4. 拼写错误：点击事件里写的this.prop.schoolid少了个s，正确写法是this.props.schoolid。

修正后的完整代码 #

1. 修复ClassResult组件 #

先合并state，把render方法放到类的顶层：

import React, { Component } from 'react';
import StudentResult from './StudentResult';
import axios from 'axios';

class ClassResult extends Component {
  constructor(props) {
    super(props);
    // 合并初始化state，不要分开赋值
    this.state = {
      terminal: 'Select Terminal',
      class: 'Select Class',
      result: []
    };
  }

  // 在这里通过AJAX获取数据，比如用componentDidMount生命周期
  componentDidMount() {
    axios.get('/your-api-endpoint')
      .then(res => {
        this.setState({ result: res.data });
      })
      .catch(err => console.error(err));
  }

  render() {
    return (
      <table className="table">
        <tbody>
          {this.state.result.map((post, i) => (
            <StudentResult
              key={i}
              name={post.STDNAME}
              roll={post.STROLLNO}
              om={post.STDTOTALOM}
              division={post.STDDIVGRADE}
              percent={post.STPERCENTAGE}
              remarks={post.STREMAKRS}
              schoolid={post.SCHOOLID}
              regno={post.REGNO}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

export default ClassResult;

2. 修复StudentResult组件（两种实用方案） #

方案一：在点击事件中直接传递最新props

这种方式简单直接，适合大多数场景：

import React, { Component } from 'react';
import axios from 'axios';

class StudentResult extends Component {
  constructor(props) {
    super(props);
    axios.defaults.baseURL = 'http://localhost:8000/api';
    // 这里不需要提前绑定带参数的方法，直接在点击时传参即可
  }

  displayDetailResult(e, schoolid, regno) {
    // 现在可以正常获取到这两个参数了！
    alert(`School ID: ${schoolid}, Registration No: ${regno}`);
    // 后续你可以用这两个参数发起AJAX请求等操作
  }

  render() {
    // 直接计算表格样式，不用存到state里，避免循环渲染
    const tableClass = this.props.percent < 50 ? 'table-danger' : '';

    return (
      <tr className={tableClass} onClick={(e) => this.displayDetailResult(e, this.props.schoolid, this.props.regno)}>
        <td>{this.props.name}</td>
        <td>{this.props.roll}</td>
        <td>{this.props.om}</td>
        <td>{this.props.division}</td>
        <td>{this.props.percent}</td>
        <td>{this.props.remarks}</td>
      </tr>
    );
  }
}

export default StudentResult;

方案二：用箭头函数类方法直接访问props

如果不想在onClick里写箭头函数（担心性能的话，不过列表项不多时影响可以忽略），可以用箭头函数作为类方法，自动绑定this并直接访问props：

import React, { Component } from 'react';
import axios from 'axios';

class StudentResult extends Component {
  constructor(props) {
    super(props);
    axios.defaults.baseURL = 'http://localhost:8000/api';
  }

  // 箭头函数自动绑定this，直接从this.props拿参数
  displayDetailResult = (e) => {
    const { schoolid, regno } = this.props;
    alert(`School ID: ${schoolid}, Registration No: ${regno}`);
  }

  render() {
    const tableClass = this.props.percent < 50 ? 'table-danger' : '';

    return (
      <tr className={tableClass} onClick={this.displayDetailResult}>
        <td>{this.props.name}</td>
        <td>{this.props.roll}</td>
        <td>{this.props.om}</td>
        <td>{this.props.division}</td>
        <td>{this.props.percent}</td>
        <td>{this.props.remarks}</td>
      </tr>
    );
  }
}

export default StudentResult;

关键知识点总结 #

• 不要在render里调用setState：render是React的渲染阶段，触发状态更新会导致无限重渲染，应该直接计算派生值或者用componentDidUpdate处理状态更新逻辑。
• 动态传参的正确姿势：要么在点击事件的箭头函数里传递最新的props，要么用箭头函数类方法直接访问this.props，这样能保证拿到的是最新的参数。
• 类组件state初始化：要把所有初始状态合并到一个this.state对象里，不要分开赋值。

内容的提问来源于stack exchange，提问作者user254153