Javascript React/Redux-将道具从一个容器传递到另一个容器

我是Redux的新手，所以如果我的实现是错误的，请给出建议

在我当前的应用程序中，我有两个容器。基本上，我想要的信息是：从一个容器，我想传递一个道具到另一个容器

具体来说，我希望Board中的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)

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

类板扩展组件{
建造师（道具）{
超级（道具）；
this.onClickToggle=this.onClickToggle.bind（this）
}
onClickToggle（坐标）{
this.props.onCellClick（coord）
}
componentDidMount（）{
}
render（）{
常量高度=this.props.grid.height
常量宽度=this.props.grid.width
让行=[]；
让myArray=[]
对于（设y=0；y)
obj[cellID]=状态
}
rows.push（{bin}）
myArray.push（obj）；
}
返回(
{rows}
)
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{onCellClick}，dispatch）
}
函数MapStateTops（状态）{
返回{
网格：state.grid
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（线路板）

容器/控制器

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)

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

类控制器扩展组件{
建造师（道具）{
超级（道具）；
this.test=this.test.bind（this）；
}
componentDidMount（）{
}
测试（）{
//这个。道具。开始
console.log（this.props）
}
render（）{
返回(
开始
清楚的
随机化
)
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{clear，randomize，start}，dispatch）
}
导出默认连接（空，mapDispatchToProps）（控制器）

我知道如何将道具传递给组件，但我没有遇到过将道具从一个容器传递到另一个容器的情况。

从for循环中删除

。您可以将控制器嵌套在下面的return语句中，以访问其值

容器/板

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)

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

从for循环中删除

。您可以将控制器嵌套在下面的return语句中，以访问其值

容器/板

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)

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