菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.net/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.net/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.net/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.net/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
class UserGist extends React.Component {
  constructor(props) {
      super(props);
      this.state = {username: [], lastGistUrl: []};
  }
 
  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result;
	  var users = [];
	  var urls = [];
	  lastGist.map(
	  	function proc(item) {
			users.push(item.owner.login);
			urls.push(item.html_url);
		}
	  );
	  
      this.setState({
        username: users,
        lastGistUrl: urls
      });
    }.bind(this));
  }
 
  componentWillUnmount() {
    this.serverRequest.abort();
  }
 
  render() {
  	var users = this.state.username;
	var urls = this.state.lastGistUrl;
        return (
          <ul>
            {
              users.map(
                function(user, index) {
  	          return (
    		  <div>
    		      <li> {user} </li> 
                        <a href={urls[index]} > {urls[index]} </a>
                    </div>
                    );
                }
              )
            }
          </ul>
        );
  }
}
 
ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.getElementById('example')
);
</script>

</body>
</html>
              