如何在 React 中调用名称作为道具传递的组件？

Question

i'm new at React. Basically i want to call different components based on the string passed as props. I've component named Device that have as prop the name of a particular device and in Device i want to call another components which has as name the props. Something like this: <DeviceName/>

This is my code: App.js

<Device name = {devName} />

Device.js

import DeviceMark from ./devices/DeviceMark
function DeviceName({devName}) {
    const DevName = devName;
    return (
        <Router>
            <Switch>
                <Route path = "/" exact><DevName /></Route>
            </Switch>
        </Router>
    )
}

Imagine that in this case DevName will replace DeviceMark

Answer 1

When you really need to convert string component names to actual components while rendering, I can suggest following way

import DeviceMark from ./devices/DeviceMark

function DeviceName({devName}) {
    const mappingComponents = {
        foo: FooComponent,
        bar: BarComponent,
        deviceMark: DeviceMark
    };
    const ComponentToRender = mappingComponents[devName || 'foo'];
    
    return (
        <Router>
            <Switch>
                <Route path = "/" exact><ComponentToRender></ComponentToRender></Route>
            </Switch>
        </Router>
    )
}

More details in official doc - https://reactjs.org/docs/jsx-in-depth.html

Answer 2

I guess you need to use React.createElement . It allows to create React element from string (if it's a basic html tag) or from function (if it's a React component).

import React from 'react'
import ReactDOM from 'react-dom'

const DeviceName = () => {
  return 'sub component'
}

const Device = ({subDev}) => {
  return (
    <div>
      { React.createElement(subDev) }
    </div>
  )
}

function App() {
  return <Device subDev={DeviceName} />
}

ReactDOM.render(<App />, document.getElementById('root'))

It's a little example. I have a main component Device . It accepts a sub-component via a prop and I pass sub-component to createElement . It does not matter if sub-component whether basic html tag or React component.

It's codesandbox example .