React排序可视化器：动态渲染CodeEditor组件无显示问题求助

问题场景 #

开发基于React+Ant Design的排序可视化器，需要根据选中的算法动态渲染CodeEditor组件，但组件始终无法显示，逻辑看似正确却无效果。

错误分析与修复步骤 #

1. 参数传递错误 #

codeEditor函数定义时接收的是对象参数（({algo})），但调用时直接传入了字符串currentAlgorithm，导致函数内部algo值为undefined，无法匹配switch case。

修复：
选择以下两种方式之一调整：

// 方式1：修改调用逻辑，传入对象
{ codeEditor({ algo: currentAlgorithm }) }

// 方式2：简化函数参数定义
const codeEditor = (algo) => {
  switch(algo){
    case "Bubble Sort":
      return <CodeEditor/>
    default:
      return null; // default分支必须返回值，避免渲染undefined
  }
}
// 调用保持不变：{ codeEditor(currentAlgorithm) }

2. 样式属性无效 #

CodeEditor组件中使用了不存在的CSS属性marginDown，应该改为标准属性marginBottom，否则底部外边距不生效，可能导致组件被遮挡：

// 修复前
style={{marginLeft:'auto', marginRight:'auto', marginTop:'20px',marginDown:'20px'}}

// 修复后
style={{marginLeft:'auto', marginRight:'auto', marginTop:'20px',marginBottom:'20px'}}

3. 容器布局冲突 #

渲染柱状图和CodeEditor的父容器设置了flexDirection: row和alignItems: end，CodeEditor会被挤到底部，且被柱状图占据的空间挤压，无法正常显示。

修复：
将父容器改为垂直布局，或把柱状图单独放在水平容器中：

<div
  style={{
    backgroundColor: '#0D1929',
    display: 'flex',
    height: '100%',
    width: '100vw',
    flexDirection: 'column', // 改为垂直布局
    alignItems: 'center',
    padding: '20px 0',
  }}
>
  {/* 柱状图单独用水平容器包裹 */}
  <div style={{display: 'flex', width: '100%', alignItems: 'end', flex: 1}}>
    {randomizedArray.map((item, index) => {
      // 原有柱状图渲染代码
    })}
  </div>
  {/* CodeEditor放在柱状图下方 */}
  { codeEditor(currentAlgorithm) }
</div>

4. 默认分支返回值缺失 #

codeEditor函数的default分支没有返回值，会导致React渲染undefined，引发警告或异常，需补充默认返回值：

const codeEditor = (algo) => {
  switch(algo){
    case "Bubble Sort":
      return <CodeEditor/>
    // 可扩展其他算法的case
    default:
      return null; // 或返回默认提示组件
  }
}

修复后关键代码示例 #

Home组件中codeEditor函数与调用 #

const codeEditor = (algo) => {
  switch(algo){
    case "Bubble Sort":
      return <CodeEditor/>
    case "Insertion Sort":
      return <CodeEditor/>
    case "Selection Sort":
      return <CodeEditor/>
    default:
      return null;
  }
}

// 调用
{ codeEditor(currentAlgorithm) }

CodeEditor组件样式修复 #

export default function CodeEditor() {
  return (
    <Space direction="vertical" style={{marginLeft:'auto', marginRight:'auto', marginTop:'20px',marginBottom:'20px'}}>
      <Collapse collapsible="icon" defaultActiveKey={['1']}>
        <Panel header="冒泡排序 - 时间复杂度O(n²) | 空间复杂度O(1)" key="1">
          <p>{text}</p>
        </Panel>
      </Collapse>
    </Space>
  )
}

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