react-rails预渲染时Material-UI组件无法渲染的动态添加问题

我明白你想实现点击“添加地点”按钮后，动态新增包含Material-UI AutoComplete组件的表单。在React场景下，不要用原生JavaScript直接操作DOM插入组件，而是通过React的状态管理来实现更可控、更符合React设计理念的方案。下面是具体的实现思路和代码示例：

核心思路 #

用React的状态数组来跟踪所有动态表单的实例，每点击一次“添加地点”按钮就往数组里新增一个表单项，最后通过数组映射渲染出所有表单。这种方式能保证React的状态与DOM完全同步，避免出现不可控的渲染问题。

完整代码示例 #

import React, { useState } from 'react';
import { TextField, Autocomplete, Button } from '@mui/material';

// 模拟地点选项数据（可替换为后端接口返回的数据）
const placeOptions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' }
];

const DynamicPlaceForm = () => {
  // 用数组管理所有动态表单，每个元素存储表单的唯一ID和选中值
  const [placeForms, setPlaceForms] = useState([{ id: 1, selectedPlace: null }]);

  // 点击按钮添加新表单
  const handleAddPlace = () => {
    const newFormId = placeForms.length + 1;
    setPlaceForms(prevForms => [...prevForms, { id: newFormId, selectedPlace: null }]);
  };

  // 处理单个AutoComplete的值变化，同步更新对应表单的状态
  const handlePlaceChange = (formId, newValue) => {
    setPlaceForms(prevForms => 
      prevForms.map(form => 
        form.id === formId ? { ...form, selectedPlace: newValue } : form
      )
    );
  };

  // 提交表单时收集所有动态表单的数据
  const handleSubmit = (e) => {
    e.preventDefault();
    const allSelectedPlaces = placeForms.map(form => form.selectedPlace);
    console.log('所有选中的地点:', allSelectedPlaces);
    // 这里可以将数据提交到后端接口
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 动态渲染所有表单 */}
      {placeForms.map(form => (
        <div 
          key={form.id} 
          className="grid-x grid-margin-x grid-margin-y grid-padding-x grid-padding-y align-center"
        >
          <div className="cell medium-6">
            <div className="field">
              <label>活动地点</label>
              <Autocomplete
                options={placeOptions}
                getOptionLabel={(option) => option.label}
                onChange={(event, newValue) => handlePlaceChange(form.id, newValue)}
                renderInput={(params) => (
                  <TextField {...params} label="选择地点" variant="outlined" fullWidth />
                )}
                value={form.selectedPlace}
              />
            </div>
          </div>
        </div>
      ))}

      {/* 添加地点按钮 */}
      <Button variant="contained" onClick={handleAddPlace} style={{ margin: '16px 0' }}>
        添加地点
      </Button>

      {/* 表单提交按钮 */}
      <Button type="submit" variant="outlined" color="primary">
        提交表单
      </Button>
    </form>
  );
};

export default DynamicPlaceForm;

关键细节说明 #

1. 状态驱动渲染：通过placeForms数组状态控制表单数量，每次新增表单都是更新状态而非直接操作DOM，符合React的单向数据流理念。
2. 唯一Key标识：渲染动态列表时必须给每个表单组件加上唯一的key（这里用自增ID），帮助React高效识别组件变化，避免不必要的重渲染。
3. 值同步处理：每个AutoComplete的选择变化都会触发对应表单状态的更新，确保提交时能完整收集所有表单的数据。
4. 避免原生DOM操作：不要用innerHTML或appendChild这类原生方法插入React组件，会跳过React的生命周期和状态管理，导致组件无法正常工作。

如果你的项目是ERB（比如Rails）与React混合开发的场景，只需确保React组件挂载到正确的DOM节点上，再通过上述方式管理动态内容即可。

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