小编典典
阅读 346
2020-07-22
React.js：使用Fetch API和对象数组中的props加载JSON数据
reactjs对React.js完全陌生，在阅读了本教程并阅读了文档之后，我仍然在使用js
fetch从JSON文件加载数据以及设置对象数组的属性方面有些挣扎。我也不确定我是否可以在事件处理程序中正确访问DOM属性。我一定想念一些简单明了的东西。
作为参考，这里是我的代码与项目的其余部分和这里就是它应该的样子。
ETA：从文档中我不知道babel浏览器已被弃用，因此决定只使用带有ES5语法的纯Javascript而不是JSX。代码已在下面更新，但仍未呈现标记。
var CanvasAnimation = React.createClass({
getInitialState: function() {
return {data: []};
},
loadData: function() {
/*
fetch("data.json")
.then(function(response) {
return response.json
.then(function(json){
this.setState({data: json});
}.bind(this))
}.bind(this));
*/
const data = [
{ id: "stalkerOne", width: 225, height: 434, spriteSheetURL: 'spriteSheets/stalkerone.jpg', rows: 5, columns: 5, totalFrames: 24 },
{ id: "stalkerTwo", width: 175, height: 432, spriteSheetURL: 'spriteSheets/stalkertwo.jpg', rows: 6, columns: 5, totalFrames: 26 },
{ id: "stalkerThree", width: 251, height: 432, spriteSheetURL: 'spriteSheets/stalkerthree.jpg', rows: 6, columns: 5, totalFrames: 28 }
];
},
componentDidMount: function() {
this.loadData();
},
componentDidUpdate: function() {
function animation(json) {
return json.map(function(data) {
return(
new CanvasSprite(
document.getElementById(data.id),
data.width,
data.height,
data.spriteSheetURL,
data.rows,
data.columns,
data.totalFrames)
);
});
};
this.setState({animaton: animation(this.state.data)});
},
handleInteraction: function(event, index) {
var offsetY = event.clientY - event.node.getBoundingClientRect().top;
var relY = offsetY/this.state.data.height;
this.props.animation[index].setFrame(relY);
},
render: function() {
var canvases = this.state.data.map(function(data, index) {
return (
React.createElement('canvas',
id = data.id,
width = data.width,
height = data.height,
style = 'border:5px solid white',
onMouseOver= this.handleInteraction(event, index))
);
});
return(
React.createElement('div', canvases)
);
}
});
ReactDOM.render(
React.createElement(CanvasAnimation, null),
document.getElementById('content')
);
阅读 346
2020-07-22
共1个答案
小编典典
好的，这是工作项目。从@gumingfeng和@hkal获得了一些帮助。
得到教训：
- React文档已经过时了。
- 直JS与JSX并没有更糟糕。
- 纠正了“提取”中的一些语法错误。
- 数据加载 后 需要实例化对象数组，以便在构造函数中传递DOM引用。
- 但是，
setState()在内部调用componentDidUpdate()会触发无限循环，因此必须直接且独立于状态来设置对象数组。 - 从数组创建DOM元素时，React不会自动将事件处理程序分配给特定元素。换句话说，必须将其传递给数组索引，以便可以用来访问其在数组中的值。
ew，我想就是这样。希望这对其他人有帮助。
最后，我要说的是，在没有JSX的情况下尝试使用React。真的不是那么糟糕:)
const { Component } = React;
const { render } = ReactDOM;
class CanvasAnimation extends Component {
constructor(){
super();
this.state = {
data: []
};
};
componentDidMount() {
fetch("data.json")
.then( (response) => {
return response.json() })
.then( (json) => {
this.setState({data: json});
});
};
componentDidUpdate() {
function animation(json) {
return json.map( (data) => {
return(
new CanvasSprite(
document.getElementById(data.id),
data.width,
data.height,
data.spriteSheetURL,
data.rows,
data.columns,
data.totalFrames)
);
});
};
//this.setState({animation: animation(this.state.data)}); //causes infinite loop
this.animation = animation(this.state.data);
};
handleInteraction(event, index) {
var offsetY = event.clientY - document.getElementById(this.state.data[index].id).getBoundingClientRect().top;
var relY = offsetY/this.state.data[index].height;
this.animation[index].setFrame(relY);
};
render() {
var canvases = this.state.data.map( (data, index) => {
return (
React.createElement('canvas',
{id : data.id,
width : data.width,
height : data.height,
//style : {border: '5px solid white'},
onMouseMove : (event) => this.handleInteraction(event, index)}
)
);
});
return(
React.createElement('div', null, ...canvases)
);
};
};
render(
React.createElement(CanvasAnimation, null),
document.getElementById('content')
);
2020-07-22