如何在输入框输入内容后动态渲染对应的React组件

1. 调整App.js逻辑 #

你可以通过「组件映射表」的方式匹配输入的星球名和对应组件，完整修改后的代码如下：

// 顶部导入依赖和所有星球组件
import { useState } from 'react';
import Earth from './components/snippets/Earth';
import Jupiter from './components/snippets/Jupiter';
import Mars from './components/snippets/Mars';
import Mercury from './components/snippets/Mercury';
import Saturn from './components/snippets/Saturn';
import Venus from './components/snippets/Venus';

// 建立星球名到组件的映射表
const PlanetComponentMap = {
  Earth,
  Jupiter,
  Mars,
  Mercury,
  Saturn,
  Venus
}

function App() {
  const [searchQuery, setSearchQuery] = useState("");
  // 新增状态存储需要渲染的组件列表
  const [renderPlanets, setRenderPlanets] = useState([]);

  const handleChange = (event) => {
    event.preventDefault();
    setSearchQuery(event.target.value);
  };

  // 新增Generate按钮点击处理逻辑
  const handleGenerate = () => {
    // 按逗号拆分输入内容，去除每个项的前后空格，过滤空值
    const inputPlanets = searchQuery.split(',')
      .map(name => name.trim())
      .filter(name => name.length > 0);
    // 匹配合法的星球组件，自动过滤输入的非法名称，同时去重
    const validComponents = [...new Set(inputPlanets)]
      .filter(name => PlanetComponentMap[name])
      .map(name => PlanetComponentMap[name]);
    setRenderPlanets(validComponents);
  }

  return (
    // 包一层根节点，满足React单根节点要求
    <div className="app-container">
      <div>
          <input
            id="inline-full-name"
            type="text"
            value={searchQuery}
            onChange={(e) => handleChange(e)}
            placeholder="输入逗号分隔的星球名，如 Mercury, Venus"
          />
      </div>
      <div>
        <div className="md:w-2/3">
          <button
            type="button"
            onClick={handleGenerate}
          >
            Generate
          </button>
        </div>
      </div>
      {/* 渲染匹配到的星球组件 */}
      <div className="planet-list">
        {renderPlanets.map((PlanetComponent, index) => (
          <PlanetComponent key={index} />
        ))}
      </div>
    </div>
  );
}

export default App

2. 可选优化 #

如果需要兼容大小写输入（比如用户输入mercury也能匹配到水星组件），可以把匹配逻辑修改为：

const validComponents = [...new Set(inputPlanets)]
  .map(name => name.charAt(0).toUpperCase() + name.slice(1).toLowerCase())
  .filter(name => PlanetComponentMap[name])
  .map(name => PlanetComponentMap[name]);

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