Question

在我的代码中，我正在使用Redux，而我从容器中传递的状态this.props.mapGenerated.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

您需要在public class Message { String name; String text; public Message(){ } public Message(String name, String text) { this.name = name; this.text = text; } public String getName() { return name; } public String getText() { return text; } }和函数return中使用map，

试试这段代码。希望这有帮助！

renderTiles()

Answer 2

使用return keyword

return row.map( (cell, colIndex) =>{
   this.renderTiles(cell,rowIndex, colIndex)
})

Answer 3

你在哪里传递原型？我期待像

这样的课程

MapGenerator.propTypes = {
  mapGenerated: React.PropTypes.object
};

另一件事是renderTiles由上面的用户注意到，我认为它应该返回值。此外，在映射之前尝试在控制台中打印道具，并查看它是否具有值。在返回之前的render方法中。

console.log(this.props.mapGenerated.grid);

它会返回你的价值吗？

<强>更新

尝试使用java脚本bind Ecmascript

::this.renderTiles

React.js - 没有正确传递组件

3 个答案: