React组件动态渲染优化及Typist组件兼容问题求助

一、替换eval的组件动态渲染优化方案 #

eval存在安全风险且不利于代码维护，推荐通过组件映射对象管理组件，直接通过键值对获取组件：

1. 定义组件映射表：

const componentMap = {
  Test0,
  Test1,
  Test2,
  Direction4 // 将所有需要动态渲染的组件加入此表
};

2. 修改点击事件逻辑，直接从映射表中取组件：

const handleClick = (e) => {
  // 随机选择映射表中的组件键，范围与组件数量匹配
  const componentKeys = Object.keys(componentMap);
  const randomKey = componentKeys[Math.floor(Math.random() * componentKeys.length)];
  setOutput(componentMap[randomKey]);
};

这种方式的优势：

• 彻底规避eval的安全隐患
• 组件关系清晰，代码可读性更强
• 扩展新组件只需在映射表中添加，无需修改核心逻辑

二、Typist组件动态切换无打字效果的解决建议 #

Typist组件通常依赖组件重新挂载触发打字动画，若组件实例未销毁重建，动画不会重新执行，可通过以下两种方式解决：

方法1：给动态组件添加唯一key #

通过更新key值强制React重新挂载组件，触发动画：

// 状态改为存储组件名称而非组件本身
const [currentComponentName, setCurrentComponentName] = useState("Test0");

// 点击事件切换组件名称
const handleClick = () => {
  const componentKeys = Object.keys(componentMap);
  const randomKey = componentKeys[Math.floor(Math.random() * componentKeys.length)];
  setCurrentComponentName(randomKey);
};

// 渲染时传入唯一key
return (
  <div>
    <button onClick={handleClick}>切换组件</button>
    {React.createElement(componentMap[currentComponentName], { key: currentComponentName })}
  </div>
);

方法2：调用Typist的重置API（若组件支持） #

部分Typist库提供重置/重启动画的方法，可通过ref调用：

const typistRef = useRef(null);

const Direction4 = () => {
  return (
    <Typist 
      ref={typistRef}
      typingDelay={50} 
      cursor={<span className="cursor">|</span>}
    >
      This is another amazing dirction description.
    </Typist>
  );
};

// 切换组件后调用重置方法（根据所用Typist库调整API）
const handleClick = () => {
  setOutput(Direction4);
  typistRef.current?.reset(); // 或typistRef.current?.start()，以实际API为准
};

若所用Typist库无重置API，优先使用添加唯一key的方案，该方式通用且有效。

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