Question

我是React和JavaScript的新手，最近开始开发一个应用程序。我想在单击button之后在boardContainer div中渲染renderBoard数组。谢谢任何答案。这是我的组件的代码：

class Main extends Component {
  constructor(props) {
    this.state = {
      size: [2, 2],
      renderBoard: false,
    }
    this.renderBoard = this.renderBoard.bind(this);
  }

  renderBoard() {
    var newWorld = [];
    var cellRow = [];

    for(var i = 0; i < this.state.size[0]; i++) {
      for (var j = 0; j < this.state.size[1]; j++){
        cellRow.push(<Cell key={[i, j]} />);
      }
      newWorld.push(<div className="row" key={i}>{cellRow}</div>);
      cellRow = [];
    }
    return newWorld;
  }

  render() {
    return (
      <div>
        <div className="headerButtons">
          <button className="submit" onClick= {this.renderBoard()}>Start</button>
        </div>
        Generation: 

        <div className="boardContainer">
          {this.renderBoard()}
        </div>
      </div>  
    );
  } 
}

class Cell extends Component {
  render() {
    return (
      <div className="cellContainer"></div>
    );
  }
}
export default Main;

Answer 1

您需要在单击按钮时设置状态，而不是调用渲染函数。做这样的事情：

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      size: [2, 2],
      renderBoard: false,
    }
    this.renderBoard = this.renderBoard.bind(this);
  }

  renderBoard() {
    ....
  }

  showBoard => () => {
     this.setState({ renderBoard: true });
  }

  render() {
    return (
      <div>
        <div className="headerButtons">
          <button className="submit" onClick={this.showBoard}>Start</button>
        </div>
        Generation: 
        <div className="boardContainer">
          {this.state.renderBoard ? this.renderBoard() : null}
        </div>
      </div>  
    );
  } 
}

或者您可以更改renderBoard函数，而不是像这样在JSX中使用三元组：

renderBoard = () => {
  if (this.state.renderBoard) {
    ....
  } else {
    return null;
  }
}

我还建议重命名您的状态变量，以使其更清晰。因此，也许不是renderBoard，而是showBoard。然后，您将像if (this.state.showBoard)一样使用它。但这并不是使其正常工作所必需的。

在组件内部渲染功能并在单击按钮时显示在容器中

1 个答案: