我有一个数组列表,我想将字符串与组件名称匹配,可以吗?我尝试了这个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);
似乎不起作用,有任何线索吗?
答案 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
};