React中如何将对象自身作为props传入内部组件？

一、关于this无效的问题 #

首先明确：如果你的组件是函数组件，内部不存在this（类组件里的this指向组件实例，但函数组件没有实例）。你尝试传入this大概率是在函数组件环境中，此时this为undefined，自然无效。

如果是类组件场景，需要确保next函数已正确绑定this（比如用箭头函数定义，或在构造器中通过bind绑定），但目前React更推荐使用函数组件+hooks的写法，建议直接放弃对this的依赖。

二、动态给组件传递props的解决方案 #

你当前的写法是提前把组件实例（比如<Inicio next={next} test={this}/>）存在opciones的contenido字段里，导致props固定死，无法在map渲染时动态修改。正确思路是存储组件本身（而非实例），在渲染阶段再传入动态props。

步骤1：修改opciones数组结构 #

将contenido字段改为存储组件函数/类，保留其他配置项：

const opciones = [
    {
        id: "TAB_inicio",
        texto: "Inicio",
        siguiente: "TAB_prueba",
        descripcionTitulo: "Bienvenido al programa de carga de Viajes",
        descripcion: "Selecciona lo que quieras hacer",
        icon: <FaCheckCircle />,
        next: next,
        // 存储组件本身，而非实例化后的结果
        componente: Inicio,
        botonSiguiente: "Nuevo Viaje",
    },
    {
        id: "TAB_descripcion",
        texto: "Descripción",
        siguiente: "TAB_incluido",
        descripcionTitulo: "Descripcion",
        descripcion: "detalles importantes",
        prueba: function prueba() {
            console.log(this)
        },
        icon: <FaBookOpen />,
        next: next,
        componente: Descripcion,
        botonSiguiente: "Siguiente",
    },
]

步骤2：在map渲染时动态传参 #

循环时取出componente字段，用JSX语法渲染并传入所需props（包括当前opcion对象本身）：

<section className='col-span-12 p-5 bg-gray-100 border-b-2 border-orange-400 rounded shadow-xl md:col-span-8 lg:col-span-10 dark:border-0 dark:bg-slate-800'>
    <DarkThemeSwitcher isDark={isDark} setDark={setDark} />
    {opciones.map((opcion) => {
        // 取出当前组件，注意变量名首字母大写（React组件命名规范）
        const Componente = opcion.componente;
        return (
            <div key={opcion.id} className={toggle === opcion.id ? "show-content" : "hide"}>
                <div className='w-full pb-5 mb-4 text-left border-b-2 border-orange-400 dark:border-cyan-400'>
                    <h2 className='text-2xl font-semibold text-black dark:text-white'>
                        {opcion.descripcionTitulo}
                    </h2>
                    <span className='text-black dark:text-white'>
                        {opcion.descripcion}
                    </span>
                </div>
                <div>
                    {/* 动态渲染组件，传入需要的props，包括整个opcion对象 */}
                    <Componente 
                        next={opcion.next} 
                        register={register} 
                        opcion={opcion}
                    />
                </div>
            </div>
        )
    })}
</section>

步骤3：在子组件中获取props #

比如在Inicio组件内，可直接拿到传入的props：

// Inicio.jsx
function Inicio({ next, opcion }) {
    // 直接使用opcion的所有属性，比如opcion.texto、opcion.descripcion等
    console.log(opcion);
    return (
        // 组件内容
    )
}

三、额外优化建议 #

• 如果next函数依赖组件内状态，建议用useCallback包裹，避免不必要的重渲染。
• 对于opciones里的prueba函数，若想访问当前opcion对象，可改成箭头函数或调用时传参：

  // 改成箭头函数（函数组件中this仍为undefined，建议直接访问目标属性）
  prueba: () => {
      console.log(opcion.texto);
  }
  // 或调用时传参
  opcion.prueba(opcion);
  

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