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

Question

对于Redux我相当新，所以如果我的实现错误，请指教。

在我目前的应用程序中，我有两个容器。基本上我想要的信息是：从一个容器中，我想将一个支柱传递给另一个容器。

具体而言，我想从局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) 

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

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

集装箱/控制器

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