如何在不刷新整页时用React组件加载指定DIV

你当前的问题在于直接通过innerHTML写入React组件标签——React组件需要通过React的渲染机制处理，而非当作普通HTML字符串插入DOM。下面是正确的实现方式：

一、按钮触发加载组件的正确写法 #

利用React状态驱动UI的核心特性，通过维护状态控制要渲染的组件，而非直接操作DOM：

import React, { Component } from 'react';
import Button from '你的Button组件路径';
import TranslationsList from './TranslationsList';

class MenuContainer extends Component {
  constructor(props) {
    super(props);
    // 初始化状态，存储当前要显示的组件
    this.state = {
      activeComponent: null
    };
    this.loadTarget = this.loadTarget.bind(this);
  }

  loadTarget() {
    // 更新状态，指定要渲染的目标组件
    this.setState({
      activeComponent: <TranslationsList />
    });
  }

  render() {
    return (
      <div>
        {/* 菜单按钮 */}
        <Button onClick={this.loadTarget}>
          {this.props.menuItem.name}
        </Button>

        {/* 目标显示区域 */}
        <div id="datapanel">
          abc
          {/* 根据状态渲染组件 */}
          {this.state.activeComponent}
        </div>
      </div>
    );
  }
}

export default MenuContainer;

如果需要支持多菜单项加载不同组件，可以给事件函数传参区分：

// 按钮部分
<Button onClick={() => this.loadTarget('translations')}>翻译列表</Button>
<Button onClick={() => this.loadTarget('settings')}>设置面板</Button>

// 事件处理函数
loadTarget(type) {
  let component;
  switch(type) {
    case 'translations':
      component = <TranslationsList />;
      break;
    case 'settings':
      component = <SettingsPanel />;
      break;
    default:
      component = null;
  }
  this.setState({ activeComponent: component });
}

二、改用链接触发的实现方式 #

链接默认会触发页面跳转，需先阻止默认行为，再执行状态更新逻辑：

// 链接部分
<a href="#" onClick={(e) => this.handleLinkClick(e, 'translations')}>
  加载翻译列表
</a>

// 事件处理函数
handleLinkClick(e, type) {
  // 阻止默认跳转行为
  e.preventDefault();
  // 复用组件切换逻辑
  this.loadTarget(type);
}

如果是复杂的单页应用，也可以结合React Router通过路由参数控制组件渲染，但仅需单页面内组件切换时，上述状态驱动的方式已足够简洁。

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