从字符串创建反应组件

时间:2019-03-07 04:07:27

标签: javascript reactjs ecmascript-6

我有一个数组列表,我想将字符串与组件名称匹配,可以吗?我尝试了这个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);

似乎不起作用,有任何线索吗?

1 个答案:

答案 0 :(得分: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
};

codesandbox

enter image description here