如果我在 React 组件中创建一个变量,我如何在状态更改时重新访问它?
If I make a variable inside a react component, how do I re-access it on a state change?
我正在制作一个 React 项目并使用 wavesurfer.js。当我按下播放按钮时,我将播放的道具从 false 更改为 true,用于使元素实际播放的方法是 visual.playPause();但是,我不确定在创建变量后如何获取对变量的引用(该变量是在 initWaveSurfer 函数中创建的可视变量)。任何帮助都会很棒!!
var React = require('react');
var ReactDom = require('react-dom');
var reactWaveSurfer = React.createClass({
getInitialState: function(){
return ({
song: this.props.song,
playing: this.props.playing
});
},
componentDidMount: function () {
this.initWavesurfer();
},
componentWillReceiveProps: function(nextProps) {
this.setState({
playing: nextProps.playing
});
},
initWavesurfer: function () {
var visualContainer = ReactDom.findDOMNode(this.refs.waveContainer);
var visual = WaveSurfer.create({
container: visualContainer,
waveColor: 'blue',
progressColor: 'purple',
barWidth: '3',
height: "90",
maxCanvasWidth: 200
});
visual.load(this.state.song.audio_url);
},
render: function () {
return <div className="wave-surfer" ref="waveContainer" ></div>;
}
});
module.exports = reactWaveSurfer;
您应该能够使用 this.state.[variable] 访问状态变量。在你的情况下 this.state.playing 和 this.state.song
在 React.js
组件中,所有当前 state
值都可以通过 this.state.<state name>
.
从自身内部访问
您可以通过从 this.initWavesurfer
返回它并从中设置您的状态来访问它。从那里,您可以通过 this.state.visual
;
访问它
var React = require('react');
var ReactDom = require('react-dom');
var reactWaveSurfer = React.createClass({
getInitialState: function(){
return ({
song: this.props.song,
playing: this.props.playing
});
},
componentDidMount: function () {
this.setState({visual: this.initWavesurfer()}); //You now have access to visual thru this.state.visual
},
componentWillReceiveProps: function(nextProps) {
this.setState({
playing: nextProps.playing
});
},
initWavesurfer: function () {
var visualContainer = ReactDom.findDOMNode(this.refs.waveContainer);
var visual = WaveSurfer.create({
container: visualContainer,
waveColor: 'blue',
progressColor: 'purple',
barWidth: '3',
height: "90",
maxCanvasWidth: 200
});
visual.load(this.state.song.audio_url);
return visual;
},
render: function () {
return <div className="wave-surfer" ref="waveContainer" ></div>;
}
});
module.exports = reactWaveSurfer;
我正在制作一个 React 项目并使用 wavesurfer.js。当我按下播放按钮时,我将播放的道具从 false 更改为 true,用于使元素实际播放的方法是 visual.playPause();但是,我不确定在创建变量后如何获取对变量的引用(该变量是在 initWaveSurfer 函数中创建的可视变量)。任何帮助都会很棒!!
var React = require('react');
var ReactDom = require('react-dom');
var reactWaveSurfer = React.createClass({
getInitialState: function(){
return ({
song: this.props.song,
playing: this.props.playing
});
},
componentDidMount: function () {
this.initWavesurfer();
},
componentWillReceiveProps: function(nextProps) {
this.setState({
playing: nextProps.playing
});
},
initWavesurfer: function () {
var visualContainer = ReactDom.findDOMNode(this.refs.waveContainer);
var visual = WaveSurfer.create({
container: visualContainer,
waveColor: 'blue',
progressColor: 'purple',
barWidth: '3',
height: "90",
maxCanvasWidth: 200
});
visual.load(this.state.song.audio_url);
},
render: function () {
return <div className="wave-surfer" ref="waveContainer" ></div>;
}
});
module.exports = reactWaveSurfer;
您应该能够使用 this.state.[variable] 访问状态变量。在你的情况下 this.state.playing 和 this.state.song
在 React.js
组件中,所有当前 state
值都可以通过 this.state.<state name>
.
您可以通过从 this.initWavesurfer
返回它并从中设置您的状态来访问它。从那里,您可以通过 this.state.visual
;
var React = require('react');
var ReactDom = require('react-dom');
var reactWaveSurfer = React.createClass({
getInitialState: function(){
return ({
song: this.props.song,
playing: this.props.playing
});
},
componentDidMount: function () {
this.setState({visual: this.initWavesurfer()}); //You now have access to visual thru this.state.visual
},
componentWillReceiveProps: function(nextProps) {
this.setState({
playing: nextProps.playing
});
},
initWavesurfer: function () {
var visualContainer = ReactDom.findDOMNode(this.refs.waveContainer);
var visual = WaveSurfer.create({
container: visualContainer,
waveColor: 'blue',
progressColor: 'purple',
barWidth: '3',
height: "90",
maxCanvasWidth: 200
});
visual.load(this.state.song.audio_url);
return visual;
},
render: function () {
return <div className="wave-surfer" ref="waveContainer" ></div>;
}
});
module.exports = reactWaveSurfer;