javascript - 如何在reactjs中没有jsx的情况下从json中获取列表内容？

Question

我一直在寻求实现这一点，但我没有找到太多关于如何在没有 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') );

Answer 1

这段代码->

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"/>