状态更新时样式不会更新

Question

我正在做一个旋转木马，当状态更新时，我的内联翻译无效。

这是我的组件：

class Carousel extends React.Component {
  constructor() {
    super();
    this.state = {
      hover: false,
      containers: 0,
      imgList: [],
      translate: 0,
      fullWidth: 0,
      width: 0
    };
    this.height = 400;

    this.moveLeft = this.moveLeft.bind(this);
    this.moveRight = this.moveRight.bind(this);
  }

  componentWillMount() {
    const imgList = [
      'http://2.bp.blogspot.com/--r4xdyuNQCQ/UAu7wFbDfDI/AAAAAAAAIUg/qtlUyQ8XKYM/s1600/Hdhut.blogspot.com+%2811%29.jpeg',
      'http://4.bp.blogspot.com/-BJaTlb_j_Fw/TwK1agDhf-I/AAAAAAAABb0/nvYDoNoSCPk/s1600/singapore-wallpaper-2-778799.jpg',
      'http://greatinspire.com/wp-content/uploads/2016/06/Most-Beautiful-Places-In-Japan-9.jpg',
      'http://www.thetravelexperts.net/gallery/places-to-visit-in-france/9_eiffel_tower.jpg'
    ];

    this.setState({ imgList: [...imgList] });
  }

  moveLeft() {
    const { translate, fullWidth } = this.state;
    this.setState({ translate: translate + fullWidth });
  }

  moveRight() {
    const { translate, fullWidth } = this.state;
    this.setState({ translate: translate - fullWidth });
  }

  componentDidMount() {
    const fullWidth = document.body.clientWidth;
    const width = fullWidth / 2;
    this.setState({ fullWidth, width });
  }

  render() {
    const { imgList, translate, fullWidth, width } = this.state;
    return (
      <nav className={style.wrapper} style={{ height: this.height }}>
        <div className={style.arrows} style={{ width: `${fullWidth}px` }}>
          <div className={style['arrow-left']} onClick={this.moveLeft} />
          <div className={style['arrow-right']} onClick={this.moveRight} />
        </div>
        <ul
          className={style.ul}
          style={{ transform: `translateX(${translate})` }}
        >
          {imgList.length > 0 &&
            imgList.map(src =>
              <li
                key={src}
                className={style.li}
                style={{ width: `${width}px` }}
              >
                <figure className={style.figure}>
                  <img className={style.img} width={width} src={src} />
                </figure>
              </li>
            )}
        </ul>
      </nav>
    );
  }
}

export default Carousel;

此代码基本上采用我的ul元素并将其转换为左侧和右侧以显示我的图像。 我尝试在moveRight和moveLeft的最后使用this.forceUpdate，但它没有用。

有什么问题？

Answer 1

您是否忘记在值之后加px？ 应该是这样的：

style={{transform: `translateX(${translate}px)` }}

您在更改后进行编码：
注意＃1 - 我没有你的风格对象所以它看起来有点奇怪。
注意＃2 - 您确定它应该在ul元素上，而不在li吗？ 注意＃3 - 您是否错过px末尾的<nav className={style.wrapper} style={{ height: this.height }}>？

＆＃13;

＆＃13;

const style = {

}
class Carousel extends React.Component {
  constructor() {
    super();
    this.state = {
      hover: false,
      containers: 0,
      imgList: [],
      translate: 0,
      fullWidth: 0,
      width: 0
    };
    this.height = 400;

    this.moveLeft = this.moveLeft.bind(this);
    this.moveRight = this.moveRight.bind(this);
  }

  componentWillMount() {
    const imgList = [
      'http://2.bp.blogspot.com/--r4xdyuNQCQ/UAu7wFbDfDI/AAAAAAAAIUg/qtlUyQ8XKYM/s1600/Hdhut.blogspot.com+%2811%29.jpeg',
      'http://4.bp.blogspot.com/-BJaTlb_j_Fw/TwK1agDhf-I/AAAAAAAABb0/nvYDoNoSCPk/s1600/singapore-wallpaper-2-778799.jpg',
      'http://greatinspire.com/wp-content/uploads/2016/06/Most-Beautiful-Places-In-Japan-9.jpg',
      'http://www.thetravelexperts.net/gallery/places-to-visit-in-france/9_eiffel_tower.jpg'
    ];

    this.setState({ imgList: [...imgList] });
  }

  moveLeft() {
    const { translate, fullWidth } = this.state;
    this.setState({ translate: translate + fullWidth });
  }

  moveRight() {
    const { translate, fullWidth } = this.state;
    this.setState({ translate: translate - fullWidth });
  }

  componentDidMount() {
    const fullWidth = document.body.clientWidth;
    const width = fullWidth / 2;
    this.setState({ fullWidth, width });
  }

  render() {
    const { imgList, translate, fullWidth, width } = this.state;
    return (
      <nav className={style.wrapper} style={{ height: `${this.height}` }}>
        <div className={style.arrows} style={{ width: `${fullWidth}px` }}>
          <div className={style['arrow-left']} onClick={this.moveLeft}>left</div>
          <div className={style['arrow-right']} onClick={this.moveRight}>right</div>
        </div>
        <ul
          className={style.ul}
          style={{transform: `translateX(${translate}px)` }}
        >
          {imgList.length > 0 &&
            imgList.map(src =>
              <li
                key={src}
                className={style.li}
                style={{ width: `${width}px`}}
              >
                <figure className={style.figure}>
                  <img className={style.img} width={width} src={src} />
                </figure>
              </li>
            )}
        </ul>
      </nav>
    );
  }
}

ReactDOM.render(<Carousel/>, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

＆＃13;

＆＃13;