2016-09-17 6 views
0

Ich bin ziemlich neu in Redux, also wenn meine Implementierung falsch ist, bitte um Rat.React/Redux - Requisiten von einem Container an einen anderen übergeben

In meiner aktuellen App habe ich zwei Container. Im Wesentlichen die Information, die ich will, ist: Von einem der Container möchte ich eine Requisite an den anderen Container übergeben.

Insbesondere möchte ich myArray Variable aus Vorstand es passieren hinunter zum -Controller Behälter.

Hier ist, was ich bisher getan habe:

Container/Karton

class Board extends Component { 
    constructor(props){ 
    super(props); 
    this.onClickToggle = this.onClickToggle.bind(this) 
    } 
    onClickToggle(coord){ 
    this.props.onCellClick(coord) 
    } 
    componentDidMount() { 

    } 
    render(){ 
    const height = this.props.grid.height 
    const width = this.props.grid.width 
    let rows = []; 
    let myArray = [] 
    for (let y = 0; y < height; y++) { 
     let rowID = `row${y}`; 
     let bin = []; 
     let obj = {} 
     for (let x = 0; x < width; x++){ 
     let cellID = `${y}-${x}`; 
     let index = y * width + x //index of grid; 
     let status = this.props.grid.cells[index];//0 = dead, 1 = alive 
     bin.push(
      <Cell 
      key={x} 
      id={cellID} 
      status={status} 
      onClick={() => this.onClickToggle({x,y})} 
      />) 
     obj[cellID] = status 
     } 
     rows.push(<tr key={y} id={rowID}>{bin}</tr>) 
     myArray.push(obj); 
     <Controller coord={myArray} /> 
    } 
    return(
     <div className="container"> 
     <div className="row"> 
      <div className="col s12 board"></div> 
      <table id="simple-board"> 
       <tbody> 
       {rows} 
       </tbody> 
      </table> 
      </div> 
     </div> 
    ) 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({onCellClick}, dispatch) 
} 
function mapStateToProps(state) { 
    return { 
    grid: state.grid 
    }; 
} 

export default connect(mapStateToProps,mapDispatchToProps)(Board) 

Container/Controller

class Controller extends Component { 
    constructor(props){ 
    super(props); 
    this.test = this.test.bind(this); 
    } 
    componentDidMount() { 
    } 

    test(){ 
    // this.props.start 
    console.log(this.props) 
    } 
    render(){ 
    return(
     <div className="container"> 
     <div className="row"> 
      <div className="col s12 controller"> 
      <a onClick={this.test} className="waves-effect waves-light btn">Start</a> 
      <a onClick={this.props.clear} className="waves-effect waves-light btn">Clear</a> 
      <a onClick={this.props.randomize}className="waves-effect waves-light btn">Randomize</a> 
      </div> 
     </div> 
     </div> 
    ) 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({clear,randomize,start}, dispatch) 
} 


export default connect(null,mapDispatchToProps)(Controller) 

Ich verstehe, wie passieren Requisiten zu Komponenten, aber ich habe keine Situation gesehen, Requisiten von einem Container zu einem anderen zu übergeben.

Antwort

2

Entfernen Sie <Controller coord={myArray} /> aus der for-Schleife. Sie können den Controller wie unten beschrieben in eine return-Anweisung verschachteln, um auf seine Werte zuzugreifen.

Container/Karton

return(

    <div className="container"> 

    <Controller coord={myArray} /> 

    <div className="row"> 
     <div className="col s12 board"></div> 
     <table id="simple-board"> 
      <tbody> 

      </tbody> 
     </table> 
     </div> 
    </div> 
) 

Container/Controller

test(){ 
    // this.props.start 
    console.log(this.props.coord) 
} 
+1

Awesome, dass die trick.Thanks tat! – Alejandro

Verwandte Themen