javascript - 从字符串创建反应组件
问题描述
我有一个数组列表,我想将字符串与组件名称匹配,这可能吗?我试过这个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);
似乎不起作用,有什么线索吗?
解决方案
由于您没有名为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
};
推荐阅读
- julia - 无法在 Julia 中将 Vector 转换为 DataFrame
- javascript - 角度类型编号不可分配给 if 语句的左侧
- python - Apply Customize Cumulative Function to Pandas
- picocli - PicoCLI : 使用部分中的选项顺序
- ios - 未能为 FBSDKShareKit cocoapod 创建客观的 Sharpie 绑定
- github - 创建 npm 注册表的成本分析
- sql - 如何使用 SQL 查询在字符“|”之后创建第二行?
- flutter - 登录后上传 FCM Token
- javascript - 搜索完成后重置表单不起作用
- android-studio-4.1 - 在 Android Studio 中找不到“记录浓缩咖啡测试”