狀態更新時樣式不會更新

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; 

此代碼基本上把我的UI元素和翻譯爲左，右，以顯示我的圖片。 我試圖在moveRight和moveLeft的最後使用this.forceUpdate，但它不起作用。

出了什麼問題？

Answer 1

您忘了在值後填上px嗎？
應該是這樣的：在更改後

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

您代碼：
注＃1 - 我沒有你的風格對象，所以它看起來有點怪。
注＃2 - 你確定它應該在ul元素上，而不是li？
請注意＃3 - 您是否在<nav className={style.wrapper} style={{ height: this.height }}>的末尾還有px？

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>