Question

我对Redux相当新，所以如果我的实现错误，请提供建议。

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

具体来说，我希望主板中的 myArray 变量将其传递给控制器容器。

这是我到目前为止所做的事情：

容器/板

var initialize_calendar;
initialize_calendar = function() {
  $('.calendar').each(function(){
    var calendar = $(this);
    calendar.fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      defaultView: 'agendaDay',
      selectable: true,
      selectHelper: true,
      slotDuration: '00:60:00',
      slotEventOverlap: false,
      forceEventDuration: true,
      minTime: '08:00:00',
      maxTime: '20:00:00',
      hiddenDays: [ 6, 7 ],
      editable: true,
      eventLimit: true,
      events: '/events.json',

};
$(document).on('turbolinks:load', initialize_calendar);

容器/控制器

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)

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

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

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

1 个答案: