Есть ли способ передать сам объект в качестве реквизита?

У меня есть объект, внутри которого есть компонент, и я хотел бы получить информацию об объекте внутри этого компонента:

const opciones = [ //todas las opciones de los compoentes
        {
            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,
            contenido: <Inicio next = {next} test = {this} />,
            botonSiguiente: "Nuevo Viaje",
        },
        {
            id: "TAB_descripcion",
            texto: "Descripción",
            siguiente: "TAB_incluido",
            descripcionTitulo: "Descripcion",
            descripcion: "detalles importantes",
            prueba: function prueba() {
                console.info(this)
            },
            icon: <FaBookOpen />,
            next: next,
            contenido: <Descripcion  register = {register} />,
            botonSiguiente: "Siguiente",
        },
    ]

Я пытался сделать это, передав «это», но это не сработало :D помогите, пожалуйста, я пытаюсь понять некоторые концепции реакции.

Я не уверен, как бы я передал это здесь, на карте:

 <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) => (
                <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>
                        {opcion.contenido}
                    </div>
                 
                </div>
            ))}

У меня есть opcion.contenido для отображения компонента, но я хочу передать некоторые реквизиты, которые я не могу сделать, потому что они не похожи на <Component ... />, это просто {opcion.contenido}

🤔 А знаете ли вы, что...
React подходит для разработки как небольших веб-сайтов, так и крупных приложений.


59
1

Ответ:

Решено

да, мы можем передать объект в качестве реквизита, следующий пример показывает, как этого можно добиться.

function Test() {
  const user = {
    name: 'John Doe',
    age: 30,
    email: '[email protected]',
  };

  return (
    <div>
      <ChildComponent user = {user} />
    </div>
  );
}