React在道具更新上重新渲染组件
我的想法/理解是,只要道具或状态发生变化,反应组件就会更新。React在道具更新上重新渲染组件
所以我宣布我的变量:
let percentage = {
width: '10%',
};
,并有setInterval
功能运行改变了这么久变量:
setInterval(function() {
percentage = {
width: '50%',
};
}, 5000);
低于这个我使我的组件:
Meteor.startup(() => {
render((
<Router>
<div>
<Nav />
<Route exact path="/" render={() => <Start percentage={percentage} />} />
<Route path="/app" component={App} />
<Modal />
</div>
</Router>
), document.getElementById('render-target'));
});
我在另一个文件中显示的百分比如下:
export default class Start extends Component {
render() {
return (
<div className="home">
<div className="meter orange">
<span style={this.props.percentage} />
</div>
</div>
);
}
}
我的分量从未想过更新,我已经把console.log
到setInterval
功能,并获得更新变量回来,但它永远不会刷新我的组件。
我误解了道具更新的工作方式吗?
传递给组件的参数被复制值,而不是引用。所以,当你呈现最外部组件,您传递电流值的percentage
到Start
组件:
<Start percentage={percentage} />
从Start
组件的角度来看,它的属性不会改变,即使所提供的变量它的初始值是。
你不能很聪明,试着用一个包含percentage
属性的对象来解决这个问题,因为对象(参数本身)不会改变,只是它的属性。
那么一个糟糕的程序员该怎么做?
说一个组件在属性更改时更新有点误导;组件在重新渲染时实际更新。很多时候,这是因为封闭(父)组件的状态改变(或者被重新渲染),并且它会将新的道具传递给内部组件。在你的情况下解决方案是使percentage
封闭组件的状态的一部分。所以,你会是这样的:
class Parent extends Component {
constructor(props, ...args) {
super(props, ...args)
this.state = { percentage: { width: '0%' } }
setInterval(() => this.setState({ percentage: { width: '50%' } }), 5000)
}
render() {
return <Start percentage={this.state.percentage} />
}
}
这在技术上是正确是组件更新时,它的道具变化;然而,改变道具的唯一方法就是重新渲染道具!道具在组件内是只读的。这就是为什么我说它是误导性(或不完整)考虑支持变化驱动组件重新渲染。
老实说,男人,谢谢你这样一个很好解释的回应。你已经解释了为什么它不能正常工作,以及如何让它起作用。希望我能更多地赞扬你。再次感谢:) – PourMeSomeCode
很高兴帮助! React是一个很棒的平台,但需要一些习惯! –
优秀的答案!目前学习React太有用了! –
为*变量*'百分比'指定一个新值不能神奇地更新*道具*'百分比'。这不是JavaScript的工作原理。这是一个简化版本的问题:'var foo = 42; var component = {foo:foo}; foo = 21; console.log(component.foo);'仍然记录第一个值'foo','42'。 –
抱歉,我很愚蠢:)我如何去更新值,以便它更新道具以及重新组件?@FelixKling – PourMeSomeCode
你可以让百分比成为你的状态的一部分,并使用setState – aw04