状態が更新されたときにスタイルが更新されない

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のfinalでthis.forceUpdateを使用しようとしましたが、動作しませんでした。

どうしたのですか？

Answer 1

値の後にpxを置くのを忘れましたか？変更後の

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

あなたコード： - それは少し奇妙に見えるので、私は自分のスタイルオブジェクトを持っていないことを
ノート＃1
は、このようにする必要があります。
注＃2 - ulの要素であり、liの要素ではないことを確認してください。
注＃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>