Estoy tratando de representar un componente de reacción basado en la entrada del usuario.

Imagina que tenemos 3 componentes reactivos. Niños, Niños, Niños. Si un usuario selecciona la opción B, entonces quiero representarlo Componente secundario.

    import React, {useState, useEffect} from 'react'

    export const Parent = (props) => {

        const [value, setValue] = useState('B')
        const [child, setChild] = useState('')

        useEffect(()=>{
            setChild(`<Child${value} />`)
        },[value])

        return(
            <div>
                {child}
            </div>
        )
    }

Pero en lugar de representar el componente secundario. React lo está representando como una cadena secundaria en DOM.

1
illiterate.farmer 22 feb. 2020 a las 16:52

2 respuestas

La mejor respuesta

Podría usar un objeto para definir un par clave / valor como este:

const components = {
  'B': ChildB,
  'C': ChildC
};

Luego, cuando desee renderizarlos condicionalmente, puede usar:

const MyComponent = components['B'];
return <MyComponent />;

Editar: dado que el método anterior requiere que cada componente se defina explícitamente, puede usar el alias importado components en su lugar:

import React, {useState, useEffect} from 'react'
import * as components from "../components";

export const Parent = (props) => {

    const [value, setValue] = useState('B')
    const [child, setChild] = useState(null);

    useEffect(()=>{
        const ChildComponent = components[`Child${value}`];
        setChild(<ChildComponent />)
    }, [value])

    return(
        <div>
            {child}
        </div>
    )
}
2
Jackson 22 feb. 2020 a las 17:16

Esto no funcionará de la manera que intentas lograrlo. Puedes probar esto:

import React, {useState, useEffect} from 'react'

    export const Parent = (props) => {

        const [value, setValue] = useState('B');

        return(
            <div>
                {value === "A" && <ChildA />}
                {value === "B" && <ChildB />}
                {value === "C" && <ChildC />}
            </div>
        )
    }
1
Muhammad Zeeshan 22 feb. 2020 a las 13:58