2017-06-13 57 views
0

我怎麼能代替從國家進出口新的反應得到的道具我的數據和真的不知道如何處理它,這裏是我斌:my appReactJs獲取數據從道具,而不是國家

任何建議或例子?

+0

國家是使用一個組件,而道具是用從一個組件傳遞到另一個價值,現在告訴我,爲什麼你需要的狀態道具中的數據?或讓我知道你想在你的示例應用程序中做什麼? –

+0

我想從另一個組件再次收集道具的數據,所以我必須用無狀態組件重新組織這個數據 – Alex

回答

1

我有改變的代碼在你的應用程序,請檢查在這裏Demo

import React from 'react' 
import {render} from 'react-dom' 
import { CSSTransitionGroup } from 'react-transition-group' 



class SendData extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = { 
     images: [ 
     'http://via.placeholder.com/350x150', 
     'http://via.placeholder.com/350x151' 
     ], 
     currentImage: 0 
    }; 
    this.fadeImage=this.fadeImage.bind(this); 
    } 
    fadeImage(e) { 
    e.preventDefault(); 
    this.setState({currentImage: (this.state.currentImage + 1) % this.state.images.length}) 
    } 
    render() 
    { 

    return(
     <FadeImage images={this.state.images} currentImage={this.state.currentImage} fadeImage={this.fadeImage}/> 
    ) 
    } 
} 
class FadeImage extends React.Component { 

    constructor(props) { 
    super(props); 
    } 



    render() { 
    return (
      <div className="image"> 
     <CSSTransitionGroup 
     transitionName="example" 
     transitionEnterTimeout={300} 
     transitionLeaveTimeout={300} 
     > 
      <section> 
      <button className="button" onClick={this.props.fadeImage.bind(this)}>Click!</button> 
      <img src={this.props.images[this.props.currentImage]}/></section> 
     </CSSTransitionGroup> 
     </div> 
    ); 
    } 
    } 


render(<SendData />, document.querySelector('#app'))