React+HTML环境下如何设置并打印JavaScript变量值

核心思路是利用React的状态驱动UI特性，放弃原生DOM操作或全局变量的方式传递选中值，而是将选中的完整项存入React状态，直接在JSX中渲染所需内容。

具体实现（函数组件为例） #

import { useState } from 'react';

function YourComponent() {
  // 初始化选中项为null，也可设置默认选中项
  const [selectedPaymentCat, setSelectedPaymentCat] = useState(null);
  // 假设你的支付分类数据数组在这里
  const items = [/* 你的paymentCat数据 */];

  // 更新选中项的函数，直接传入选中的paymentCat对象
  const updateSelectedCat = (paymentCat) => {
    setSelectedPaymentCat(paymentCat);
  };

  return (
    <div>
      {/* 列表渲染逻辑 */}
      {items.map((paymentCat) => (
        <PaymentlistItem 
          key={paymentCat.id} 
          paymentCat={paymentCat} 
          state={paymentCat.id === selectedPaymentCat?.id ? 'selected' : 'notSelected'} 
          onClick={() => updateSelectedCat(paymentCat)} 
        />
      ))}

      {/* 显示选中项信息的区域，直接从state取值渲染 */}
      <div id="paymentText">
        {selectedPaymentCat ? (
          <>
            选中ID：{selectedPaymentCat.id}<br/>
            分类：{selectedPaymentCat.category}<br/>
            价格：{selectedPaymentCat.price}
          </>
        ) : (
          '请选择一个支付分类'
        )}
      </div>
    </div>
  );
}

为什么之前的方法无效？ #

• React的UI由状态决定，手动用document.getElementById(...).innerHTML修改DOM的操作会被React的重新渲染覆盖，因为React无法感知这类手动DOM修改。
• 你定义的selectedId等全局变量不属于React状态，React不会监听它们的变化，所以变量更新后UI不会自动刷新。

类组件版本（若使用类组件） #

import React from 'react';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedPaymentCat: null,
      items: [/* 你的数据 */]
    };
  }

  updateSelectedCat = (paymentCat) => {
    this.setState({ selectedPaymentCat: paymentCat });
  };

  render() {
    const { selectedPaymentCat, items } = this.state;
    return (
      <div>
        {items.map((paymentCat) => (
          <PaymentlistItem 
            key={paymentCat.id} 
            paymentCat={paymentCat} 
            state={paymentCat.id === (selectedPaymentCat?.id || '') ? 'selected' : 'notSelected'} 
            onClick={() => this.updateSelectedCat(paymentCat)} 
          />
        ))}

        <div id="paymentText">
          {selectedPaymentCat ? (
            <>
              选中ID：{selectedPaymentCat.id}<br/>
              分类：{selectedPaymentCat.category}<br/>
              价格：{selectedPaymentCat.price}
            </>
          ) : (
            '请选择一个支付分类'
          )}
        </div>
      </div>
    );
  }
}

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