Question

正如标题所说，我希望能够对不同的组件使用相同的axios响应。我有一些限制，例如，我只能通过在HTML脚本中添加脚本标签来使用react，所以对我来说，export或jsx之类的事情就不可能了。

这是我的反应代码：

    class User extends React.Component {

      state = {
        user: {}
      }

    componentWillMount() {
      console.log(localStorage.getItem("user"))
      axios.get('http://localhost:8080/dashboard?user=' + localStorage.getItem("user"))
      .then(res => {
        const userResponse = res.data
        setTimeout(() =>
       this.setState({user: userResponse.user}), 1000);
      })
    }

      render () {
        const {user} = this.state
        if (user.fullName === undefined)
        return React.createElement("div", null, 'loading..');


        return React.createElement("span", {className: "mr-2 d-none d-lg-inline text-gray-600 small" }, user.fullName);
      }

    }

    ReactDOM.render( React.createElement(User, {}, null), document.getElementById('userDropdown') );

class Roles extends React.Component{

  state = {
    user: {}
  }

  componentWillMount() {
    console.log(localStorage.getItem("user"))
    axios.get('http://localhost:8080/dashboard?user=' + localStorage.getItem("user"))
    .then(res => {
      const userResponse = res.data
      setTimeout(() =>
      this.setState({user: userResponse.user}), 1000);
    })
  }

  render () {
    const {user} = this.state
    const roles = user.user.roles.map((rol) =>  rol.roleName)

    if (user.fullName === undefined)
    return React.createElement("div", null, 'loading..');

    return React.createElement("a", {className: "dropdown-item" }, user.fullName);
  }
}


ReactDOM.render( React.createElement(Roles, {}, null), document.getElementById('dropdownRol') );

我希望能够使用相同的axios响应数据来管理不同的组件（渲染每个组件）。

考虑到我的限制，这可能吗？

预先感谢

Answer 1

这是一个可行的示例。我尝试用注释为所有内容添加注释，但很高兴尝试澄清您是否有疑问。

<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="userDropdown"></div>
<div id="dropdownRol"></div>

{{1}}

如何在不使用导出的情况下在不同组件中使用axios响应？

1 个答案: