javascript - React.js——未正确传递组件

Question

在我的代码中，我使用 Redux，并且从容器传递的状态 this.props.mapGenerate.grid 是一个 2D 数组。

话虽如此，我嵌套了一个循环，以便从其组件输出 Tiles，但我根本没有看到它被调用。

container.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux';
import Tiles from '../components/Tiles';

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

  }
  renderTiles(cell,row,column){
    <Tiles cell={cell} row={row} column={column} />

  }
  render(){
    return (
      <svg width="500" height="500">
        {this.props.mapGenerated.grid.map( (row,rowIndex) =>{
          row.map( (cell, colIndex) =>{
            this.renderTiles(cell,rowIndex, colIndex)
          })
        })}
      </svg>
    )
  }
}

我做错了什么？

Answer 1

您需要在map中使用return和函数renderTiles()，

试试这个代码。希望这有帮助!

import React, { Component } from 'react';
import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux';
import Tiles from '../components/Tiles';

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

  }
  renderTiles(cell,row,column){
    return <Tiles cell={cell} row={row} column={column} />

  }
  render(){
    return (
      <svg width="500" height="500">
        {this.props.mapGenerated.grid.map( (row,rowIndex) =>{
          return row.map( (cell, colIndex) =>{
            return this.renderTiles(cell,rowIndex, colIndex)
          })
        })}
      </svg>
    )
  }
}