React组件间传递单个值的最简方法及组件A向B传点击值

嘿，咱们来解决你遇到的组件传值问题！你需要把ReportsData组件（也就是组件A）里点击选中的项传递给组件B做格式化处理，对吧？下面给你几个贴合你代码场景的实用方案：

方案1：父子组件直接通过Props传递（最常用场景） #

如果组件B是ReportsData的直接子组件，那用props传递是最简单直接的方式。我们只需要在ReportsData里把点击选中的项存入state，再把state作为props传给组件B即可：

修改后的ReportsData组件代码 #

import React, { Component } from 'react';
import _ from 'lodash';
import moment from 'moment';
// 引入你的组件B
import ComponentB from './ComponentB';

class ReportsData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedReport: null // 存储点击选中的报告项
    };
    // 绑定this到点击事件处理函数
    this.handleReportClick = this.handleReportClick.bind(this);
  }

  handleReportClick(reportItem) {
    // 点击时更新state，保存选中的项
    this.setState({ selectedReport: reportItem });
  }

  render() {
    const { reports, employees } = this.props;
    // 按日期倒序排序报告
    let sortedReports = _.sortBy(reports, o => new moment(o.date)).reverse();

    return (
      <div>
        {/* 遍历渲染报告列表，给每个项添加点击事件 */}
        {sortedReports.map(report => (
          <div 
            key={report.id} 
            onClick={() => this.handleReportClick(report)}
            style={{ cursor: 'pointer', margin: '8px 0' }}
          >
            {moment(report.date).format('YYYY-MM-DD')} - {report.title}
          </div>
        ))}

        {/* 将选中的报告项通过props传递给组件B */}
        <ComponentB targetData={this.state.selectedReport} />
      </div>
    );
  }
}

组件B接收并处理数据的代码 #

import React from 'react';
import moment from 'moment';

const ComponentB = ({ targetData }) => {
  // 如果还没选中任何项，显示提示
  if (!targetData) {
    return <div>请选择一个报告项进行格式化</div>;
  }

  // 执行你的格式化操作
  const formattedDate = moment(targetData.date).format('MMMM Do YYYY, h:mm:ss a');
  const formattedEmployee = targetData.employeeId 
    ? `提交人：${employees.find(e => e.id === targetData.employeeId)?.name}` 
    : '无提交人信息';

  return (
    <div className="formatted-container">
      <h3>格式化后的报告详情</h3>
      <p><strong>日期：</strong>{formattedDate}</p>
      <p><strong>提交人：</strong>{formattedEmployee}</p>
      <p><strong>内容摘要：</strong>{targetData.content?.substring(0, 100)}...</p>
    </div>
  );
};

export default ComponentB;

方案2：React Context（跨层级组件传值） #

如果组件B和ReportsData不是直接的父子关系，而是跨了多层组件，用Context可以避免繁琐的props层层传递：

1. 创建Context文件 #

// ReportContext.js
import React, { createContext, useState, useContext } from 'react';

// 创建Context
const ReportContext = createContext();

// 定义Provider组件，包裹需要共享状态的组件
export const ReportProvider = ({ children }) => {
  const [selectedReport, setSelectedReport] = useState(null);

  return (
    <ReportContext.Provider value={{ selectedReport, setSelectedReport }}>
      {children}
    </ReportContext.Provider>
  );
};

// 自定义钩子，简化Context的使用
export const useReportContext = () => {
  const context = useContext(ReportContext);
  if (!context) {
    throw new Error('useReportContext必须在ReportProvider内部使用');
  }
  return context;
};

2. 在根组件中包裹Provider #

// App.js
import { ReportProvider } from './ReportContext';
import ReportsData from './ReportsData';
import ComponentB from './ComponentB';

function App() {
  return (
    <ReportProvider>
      <div className="app-container">
        <ReportsData />
        {/* 不管ComponentB在哪个层级，都能拿到共享状态 */}
        <ComponentB />
      </div>
    </ReportProvider>
  );
}

3. 修改ReportsData组件使用Context #

// ReportsData.jsx
import React, { Component } from 'react';
import _ from 'lodash';
import moment from 'moment';
import { ReportContext } from './ReportContext';

class ReportsData extends Component {
  render() {
    const { reports, employees } = this.props;
    let sortedReports = _.sortBy(reports, o => new moment(o.date)).reverse();

    return (
      <ReportContext.Consumer>
        {({ setSelectedReport }) => (
          <div>
            {sortedReports.map(report => (
              <div 
                key={report.id} 
                onClick={() => setSelectedReport(report)}
                style={{ cursor: 'pointer', margin: '8px 0' }}
              >
                {moment(report.date).format('YYYY-MM-DD')} - {report.title}
              </div>
            ))}
          </div>
        )}
      </ReportContext.Consumer>
    );
  }
}

4. 组件B通过Context获取数据 #

// ComponentB.jsx
import React from 'react';
import moment from 'moment';
import { useReportContext } from './ReportContext';

const ComponentB = () => {
  const { selectedReport } = useReportContext();

  if (!selectedReport) {
    return <div>请选择一个报告项进行格式化</div>;
  }

  // 执行格式化操作
  const formattedDate = moment(selectedReport.date).format('MMMM Do YYYY, h:mm:ss a');

  return (
    <div className="formatted-container">
      <h3>格式化后的报告详情</h3>
      <p><strong>日期：</strong>{formattedDate}</p>
      <p><strong>标题：</strong>{selectedReport.title}</p>
    </div>
  );
};

export default ComponentB;

如果你的应用复杂度较高，还可以考虑使用Redux Toolkit这样的状态管理库，但对于这个场景来说，上面两种方案已经完全够用了。

内容的提问来源于stack exchange，提问作者Dženis H.