反应 - 组件样式不从道具更新

Question

我目前遇到一个问题，即我的一个组件（ComponentThree）样式没有更新，即使发送的道具和生成的样式实际上更新正确。

我

正在使用父子通信技术，其中我公开了一个 props 函数，我的第二个组件可以针对该函数触发。然后，我的第三个组件从父级的状态中运行出来，父级的状态作为道具传递给它。

下面是我的代码（请原谅小的编码问题，因为我不得不把它撕掉并概括）：

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>;
  }
}

欢迎任何建议。

Answer 1

最后它真的很简单，完全是一个开发错误:)（可耻的尴尬）

在getStyles函数中，我正在做一堆计算 - 当将其应用于样式时，我忘记了放入%，所以 React 只是将其视为无效样式并忽略了！

Answer 2

如果您只计算渲染中的样式，而不是将它们保存在状态中，ComponentThree会更简单。目前，您正在安装以及新道具出现时进行簿记，但最终结果是，当调用render时，您拥有所需的样式。相反，只需在render中计算它们，您的大部分代码就会消失。我怀疑你的错误在某个地方是一个愚蠢的错误，通过重构，你最终可能会删除导致你的错误的代码。