React - 不从props更新的组件样式

时间:2016-03-02 22:36:53

标签: javascript reactjs styles

我目前遇到的问题是我的某个组件( 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>;
  }
}

欢迎任何建议。

2 个答案:

答案 0 :(得分:1)

最终真的很简单,完全是一个开发者的错误:)(可耻的尴尬)

getStyles函数中,我正在进行一系列计算 - 将它应用于我忘记放置%的样式时,所以React只是将其视为无效样式并被忽略!

答案 1 :(得分:0)

如果你只是在渲染中计算样式而不是将它们保存在状态中,那么

ComponentThree会更简单。目前您正在进行挂载和新道具的记录,但最终结果是您拥有调用render时所需的样式。相反,只需在render中计算它们,大多数代码都会消失。我怀疑你的错误在某个地方是一个愚蠢的错误,通过重构你可能最终会删除导致你的错误的代码。