Modal内使用传入的Screens组件时传props导致页面冻结，如何动态传参

你之前遇到的两种异常，本质都是对React组件渲染规则的理解偏差加代码逻辑疏漏导致的：

• 直接写{screens()}能运行但传不了自定义props：这种写法是把Screens组件当普通函数手动调用，完全脱离了React的渲染体系，虽然能输出JSX节点，但React不会为这个调用维护组件的生命周期和状态更新逻辑，自然没法灵活传入自定义props，长期用还会出现状态异常。
• 写{Screens}导致页面冻结卡死的核心原因有两个：
  • 变量作用域覆盖：你在Modal内部写const Screens = (screens) => (<Screens index={{idx:0}}/>);时，新声明的局部变量Screens覆盖了原本从props拿到的原始Screens组件引用，组件内部的<Screens />实际指向自己，触发无限递归渲染，直接占满浏览器主线程导致页面无响应。
  • 渲染方式错误：React要求组件必须通过JSX标签（即<Component />）的形式触发渲染，直接把组件函数当普通值放在JSX的大括号里，不会被React识别为可正常调度的节点。
• 额外的潜在隐患：你原来的Screens组件把Screen1、Screen2定义在组件内部，每次Screens组件重新渲染时，都会生成全新的组件引用，React会认为这是和之前完全不同的组件类型，反复销毁重建DOM节点，后续会出现输入框失焦、状态丢失的问题。

第一步：调整Modal组件的渲染逻辑 #

拿到外部传入的Screens组件时，避免和后续变量重名，直接通过JSX标签的形式渲染，在标签上传入需要的自定义props即可，完全不需要写额外的返回JSX的包装函数：

// Modal.js 核心实现
// 从props拿到外部传入的原始Screens组件，命名上避开重名
const RawScreens = props.screens;

return (
  <div className="modal-wrapper">
    {/* ... 其他Modal的标题、关闭按钮等固定结构 */}
    <div className="modal-body">
      {/* 直接在JSX标签上传入需要的自定义props，支持动态传值 */}
      <RawScreens 
        index={{ idx: 动态变化的页码值 }}
        // 其他需要传入的自定义props
        onIndexChange={(newIdx) => {}}
      />
    </div>
  </div>
)

这种写法是React原生支持的组件传参方式，不会触发递归，也能正常维护Screens组件内部的所有state和生命周期。

第二步：优化Screens组件的内部结构 #

把原本定义在Screens内部的静态子屏组件移到组件外层，避免每次渲染生成新的组件引用，同时把原本直接调用组件的写法替换成JSX渲染：

import { useState } from 'react';

// 移到Screens组件外层，固定组件引用，避免每次渲染重复生成
const Screen1 = ({ onChange }) => {
  return (
    <>
      <input type="text" id="screen1_input1" onChange={onChange} />
      <br />
      one
    </>
  )
}
const Screen2 = ({ onChange }) => {
  return (
    <>
      <input type="text" id="screen2_input1" onChange={onChange} />
      <br />
      <input type="text" id="screen2_input2" onChange={onChange} />
      <br />
      two
    </>
  )
}

const Screens = (props) => {
  // 兼容空props的场景，避免取值时报错
  const initialIdx = props?.index?.idx ?? 0;
  const [contentData, setContentData] = useState({});
  const [indexState, setIndexState] = useState(initialIdx);

  const onChange = (e) => {
    // 用函数式更新避免状态闭包问题
    setContentData(prev => ({
      ...prev,
      [e.target.id]: e.target.value
    }))
  };

  // 按当前索引渲染对应子屏
  const renderCurrentScreen = () => {
    switch (indexState) {
      case 0:
        return <Screen1 onChange={onChange} />
      case 1:
        return <Screen2 onChange={onChange} />
      default:
        return null
    }
  }

  return (
    <h2 className="screens">
      {renderCurrentScreen()}
    </h2>
  );
}

• 不要在JSX中直接手动调用组件函数（比如写{RawScreens({idx:0})}），这种写法和之前的screens()一样，会脱离React的渲染调度，没法正常维护组件状态。
• 组件引用命名要注意作用域边界，在组件内部声明变量时，尽量不要和从props拿到的组件同名，避免触发递归渲染导致页面冻结。
• 只要是在React的渲染体系内，给组件传自定义props直接通过JSX标签属性传递即可，不需要额外写包装函数。

内容的提问来源于stack exchange，提问作者S.W.