reactjs - 状态更新时样式不更新

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 - 我没有你的样式对象，所以它看起来有点奇怪。
Note#2 - 您确定它应该位于 ul 上吗？元素而不是 li ？
Note#3 - 您是否错过了px最后<nav className={style.wrapper} style={{ height: this.height }}>还有？

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'));

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