reagieren img-Tag Fehler geben
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
var defer = new Array();
//var _this = this;
var repocall = $.ajax({
url: this.props.url,
dataType: 'json',
})
.then((data)=>{
var dataLength;
for (dataLength = 0; dataLength <data.length;dataLength ++) {
var ajax = $.ajax({
url: data[dataLength].contributors_url,
method: 'get'
});
defer.push(ajax);
}
Promise.all(defer).then((results)=>{
var res = results.filter(Boolean);
//console.log(res);
//var flatten = _.flattenDeep(res);
var resUniq = _.uniqBy(_.flattenDeep(res),'login');
//console.log(resUniq);
this.setState({data:resUniq});
});
});
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data = {this.state.data} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
//console.log(this.props.data);
var commentNodes = this.props.data.map(function(comment) {
console.log(comment);
return (
<Comment comment={comment} key={comment.id}>
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var Comment = React.createClass({
render: function() {
return (
<div>
<img src={'https://avatars.githubusercontent.com/u/5215440?v=3'} />
</div>
);
}
});
ReactDOM.render(
<CommentBox url = 'https://api.github.com/orgs/opencord/repos' />,
document.getElementById('content')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="app/hello.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>
ich diese Störung erhalte, während img-Tag, aber die Bilder werden auf der Seite angezeigt. Ich verwende eine Remote-URL zur Anzeige des Bildes. Auch mein virtuelles DOM hat doppeltes DOM. Ich bin
Danke für die Antwort, ich habe die Änderung tat und immer noch kann ich die mehrere Dome sehen. –
Mehrere DOMs? Bitte erklären Sie – Moonjsit
Sorry, ich meinte doppelte DOM, siehe das Bild –