我目前遇到的问题是我的某个组件( ComponentThree )样式没有被更新,即使发送的道具和生成的样式实际上正确更新。
我正在使用Parent-Child通信技术,我正在暴露我的第二个组件可以触发的道具功能。然后,我的第三个组件将运行父项的状态,并将其作为prop传递给它。
以下是我的代码(原因是我不得不将其删除并进行概括):
class ComponentOne extends React.Component {
constructor(){
super();
this.state = {
swipePosition: 0,
};
}
handleSwipe(val, animate = false) {
this.setState({
swipePosition: val,
});
}
render() {
return <div className="componentOne">
<ComponentTwo onSwipe={this.handleSwipe.bind(this)} />;
<ComponentThree swipePosition={this.state.swipePosition} />
</div>;
}
}
class ComponentTwo extends React.Component {
handlePanEnd() {
this.props.onSwipe(percentage);
}
render() {
return <Hammer onPanEnd={this.handlePanEnd.bind(this)}>
<li>some content goes here...</li>
</Hammer>;
}
}
class ComponentThree extends React.Component {
constructor(){
super();
this.state = {
styles: {
rejected: {},
accepted: {},
},
};
}
getStyles(swipePosition) {
// do bunch of stuff i.e. for rejected:
const rejected = {
WebkitTransform: 'translate3d(-100%, 0, 0)'
}
this.setState({
styles: {
rejected,
accepted,
},
});
}
componentWillReceiveProps(nextProps) {
this.getStyles(this.props.swipePosition);
}
componentDidMount() {
this.getStyles(this.props.swipePosition);
}
render() {
return <div className='ComponentThree'>
<div style={this.state.styles.rejected}></div>
<div style={this.state.styles.accepted}></div>
</div>;
}
}
欢迎任何建议。
答案 0 :(得分:1)
最终真的很简单,完全是一个开发者的错误:)(可耻的尴尬)
在getStyles
函数中,我正在进行一系列计算 - 将它应用于我忘记放置%
的样式时,所以React只是将其视为无效样式并被忽略!
答案 1 :(得分:0)
ComponentThree
会更简单。目前您正在进行挂载和新道具的记录,但最终结果是您拥有调用render
时所需的样式。相反,只需在render
中计算它们,大多数代码都会消失。我怀疑你的错误在某个地方是一个愚蠢的错误,通过重构你可能最终会删除导致你的错误的代码。