Есть ли способ передать сам объект в качестве реквизита?
У меня есть объект, внутри которого есть компонент, и я хотел бы получить информацию об объекте внутри этого компонента:
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.cloneElement
Привет! хм, я хочу, чтобы компонент динамически изменялся, поэтому, если obj является вторым опцией, он должен захватить компонент, который находится внутри него, и я бы назвал его так {opcion.contenido}. Я не уверен, имеет ли это смысл.
` function actual(opcion_actual) { opciones.forEach((opcion) => { if (opcion.id === opcion_actual) { return option } }); } `Я пытался вернуть его, но он выдает неопределенное значение, но когда я консолью.log, он получает к нему доступ. Я в замешательстве :' )
Ответы 1
да, мы можем передать объект в качестве реквизита, следующий пример показывает, как этого можно добиться.
function Test() {
const user = {
name: 'John Doe',
age: 30,
email: '[email protected]',
};
return (
<div>
<ChildComponent user = {user} />
</div>
);
}
opciones.map((opcion) => <OpcionComponent opcion = {opcion} key = {opcion.id} />)...?