时间戳

首页 > 解决方案 > 如何根据字符串值获取组件？

reactjs - 如何根据字符串值获取组件？

问题描述

我正在尝试根据用户输入呈现一个反应组件。

想象一下，我们有 3 个反应组件。孩子A，孩子B，孩子C。如果用户选择选项 B，那么我想渲染他 ChildB 组件。

    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>
        )
    }

但不是渲染 ChildB 组件。React 将其渲染为 DOM 中的 ChildB 字符串。

标签： reactjs

解决方案

您可以使用一个对象来定义一个键/值对，如下所示：

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

然后，当您想有条件地渲染它们时，您可以使用：

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

编辑：由于上述方法需要显式定义每个组件，因此您可以使用导入的别名components：

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>
    )
}

推荐阅读