React/Redux - 1つのコンテナから別のコンテナへの小道具の受け渡し

Question

私はReduxをかなり新しくしているので、実装が間違っている場合はアドバイスをお願いします。

私の現在のアプリでは、2つのコンテナがあります。基本的に私が欲しい情報は：コンテナの1つから、私は他のコンテナに小道具を渡したいと思います。

具体的には、私は会からmyarrayの変数がコントローラコンテナにそれを渡したいです。

は、ここで私はこれまで何をやったかです：

コンテナ/ボード

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) 

コンテナ/コントローラ

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) 

私はコンポーネントに小道具を渡す方法を理解し、私は1つの容器から別の容器に小道具を通すという状況に直面していない。

Answer 1

forループから<Controller coord={myArray} />を削除します。以下のようなreturn文の中にコントローラを入れ子にして、その値にアクセスすることができます。

コンテナ/ボード

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

trick.Thanksをしたコンテナ/コントローラ

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