создать реагирующий компонент из строки

Question

У меня есть список массивов, я бы хотел сопоставить строку с именем компонента, это возможно?Я пробовал это https://codesandbox.io/s/lpzq3jvjm7

function App() {
  const obj = {
    name: "Name"
  };

  const capitalize = (s) => {
    if (typeof s !== 'string') return ''
    return s.charAt(0).toUpperCase() + s.slice(1)
  }

  return (
    <div className="App">
      {React.createElement(capitalize(obj.name), {
        name: "james"
      })}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

, кажется, не работает, какая-либо подсказка?

Answer 1

Трудно сказать, с какой ошибкой вы действительно столкнулись, поскольку у вас не было компонента с именем Name.Простое исправление?

function Name(props) {
  return props.name
}

function App() {
  const obj = {
    name: Name
  };

  return (
    <div className="App">
      {React.createElement(obj.name, {
        name: "james"
      })}
    </div>
  );
}

Печать james на странице.

Обновление

Вам не хватает нескольких вещей ... во-первых, импортируйте свойкомпонент

import Name from './Name'

и внутри Name.js вы пропустили импорт реакции

import React from 'react'
export default ({ name }) => <h1>my name is {name}</h1>;

и убедитесь, что для вашего объекта установлено действительное значение Name, а не строка `«Имя»

const obj = {
  name: Name
};

коды и поле