Создать компонент реакции из строки

У меня есть список массивов, я хотел бы сопоставить строку с именем компонента, возможно ли это? Я попробовал это 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);

не работает, есть подсказки?

@CodeManiac, что, если у меня уже есть компонент, но он находится в другом файле? codeandbox.io/s/5k41vv116n

— 07.03.2019 05:19

Вы можете импортировать из этого файла import Name from whatever path of that file

— 07.03.2019 05:20

javascript reactjs ecmascript-6

07.03.2019 05:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

891

Ответы 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
};

кодыпесочница

У меня есть компонент Name, он находится в Name.js

— 07.03.2019 05:17

07.03.2019 05:16

Другие вопросы по теме

Как поделиться изображением с текстом в Whatsapp в reactjs?

Как правильно включить SVG в ReactJS?

Как вызвать несколько экземпляров одной и той же функции с разными аргументами в onClick React?

Почему defaultProps с интерфейсом не разрешен? отметить в машинописном тексте

Как узнать, откуда пришло сообщение postMessage?

Сопоставление элементов реквизита в массиве в React

Как передать свойства компоненту в React

Шифрование, затем сохранение токена доступа в localStorage

React — ошибка консоли в отношении формата даты — «Объекты недействительны в качестве дочернего элемента React»

Невозможно передать реквизиты между классами с помощью React

Создать компонент реакции из строки

Ответы 1

Другие вопросы по теме

Похожие вопросы