我一直在寻求实现这一点,但我没有找到太多关于如何在没有 JSX 的情况下实现这一点的信息。因为 JSX 对我来说不是一个选项,我只能通过在 html 文件中添加标签来使用 React,我不喜欢将 babel 用于生产应用程序的想法。
我找到了获取除 Angular 色列表之外的任何键的内容的方法。我希望能够获得每个 Angular 色的信息。这可能吗?
这是我的 json 响应:
{
"user": {
"userId": 1,
"fullName": "xxxxx",
"ldapId": "xxxx",
"contraseña": "xxxxxx!",
"email": "c@mail",
"deleteFlag": "N ",
"access": "Y ",
"roles": [
{
"roleId": 2,
"roleName": "Admin",
"focusAccount": "N ",
"channelAccount": "N ",
"menuHome": null
},
{
"roleId": 1,
"roleName": "Dashboard",
"focusAccount": "N ",
"channelAccount": "N ",
"menuHome": null
}
]
}
}
Reactjs 代码:
class User extends React.Component {
state = {
user: {}
}
componentDidMount() {
axios.get('http://localhost:8080/dashboard?user=' + 'xxxxx')
.then(res => {
const user = res.data
this.setState({user});
})
}
render () {
const {user} = this.state
console.log({user})
return React.createElement("ul", null, Object.keys(user).map( data => (
React.createElement("li", null, user[data].fullName)
)))
}
}
ReactDOM.render( React.createElement(User, {}, null), document.getElementById('root') );
最佳答案
这段代码->
return React.createElement("ul", null, Object.keys(user).map( data => (
React.createElement("li", null, user[data].fullName)
)))
没有多大意义,你循环了user
的所有键, 然后询问 fullName
, 如果您想获取所有条目并将其放入 <li>
那么它可能更有意义。
但是如果你想要更细粒度的控制,那么 ->
return React.createElement("ul", null, [
React.createElement("li", null, user.fullName),
React.createElement("li", null, user.email)
])
如果您在渲染 user
之后对象完全自动,那么这也是可能的,但是你有更多的事情要做 object's within object's
,那么你可能想要一个 <UL>
在你的里面 <LI>
的。
下面是一个例子,而不是使用 axios
为了获取您的数据,我刚刚使用了一个常量,但它可以与 axios
一起正常工作也。我也做过假装 async
使用 setTimeout
的请求, 和一个简单的 loading..
指标。
const userrec = {
"user": {
"userId": 1,
"fullName": "xxxxx",
"ldapId": "xxxx",
"contraseña": "xxxxxx!",
"email": "c@mail",
"deleteFlag": "N ",
"access": "Y ",
"roles": [
{
"roleId": 2,
"roleName": "Admin",
"focusAccount": "N ",
"channelAccount": "N ",
"menuHome": null
},
{
"roleId": 1,
"roleName": "Dashboard",
"focusAccount": "N ",
"channelAccount": "N ",
"menuHome": null
}
]
}
};
class User extends React.Component {
state = {
user: {}
}
componentDidMount() {
//lets pretend it's async
setTimeout(() =>
this.setState({user: userrec.user}), 1000);
}
render () {
const {user} = this.state
if (user.fullName === undefined)
return React.createElement("div", null, 'loading..');
return React.createElement("ul", null, [
React.createElement("li", null, user.fullName),
React.createElement("li", null, user.email)
]);
}
}
ReactDOM.render(React.createElement(User), document.getElementById("mount"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="mount"/>
关于javascript - 如何在reactjs中没有jsx的情况下从json中获取列表内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56025452/