reactjs - 子组件列表未渲染

Question

我尝试使用子组件渲染列表，但最终没有渲染任何内容。

PropertyBar 组件中的片段:

updateSelectedCell() {
    if (graph.selectedCell != null) {
      this.setState({
        selectedCell: graph.selectedCell,
        cellProperties: Array.from(graph.selectedCell.value.attributes)
      });
    }
  }

  renderPropertyList() {
    this.state.cellProperties.map(key => {
      <PropertyBarItem name={key.nodeName} value={key.nodeValue} />
    })
  }

  render() {
    if (this.state.selectedCell != null) {
      return (
        <div>
          <Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
          <List>
            {this.renderPropertyList}
          </List>
        </div>
      )
    }
    return (
      <div>
        <Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
        <List>
          <p>Click on a cell to view its properties.</p>
        </List>
      </div>
    )
  }

当用户单击按钮时，它会使用数组更新状态，然后使用数组内的键呈现 PropertyBarItem 列表。它最终不会显示任何内容，但不会崩溃。使用简单的 p 标签进行测试，它也不会渲染任何内容:

renderPropertyList() {
    this.state.cellProperties.map(key => {
      <p> {key} </p>
    })
  }

Answer 1

您没有调用renderPropertyList方法。添加 () 来调用它。

<div>
  <Button
    variant="contained"
    color="primary"
    fullWidth={true}
    onClick={() => this.updateSelectedCell()}
  >
    View properties
  </Button>
  <List>{this.renderPropertyList()}</List>
</div>

您还必须从 renderPropertyList 返回结果，并从给定 map 的函数返回 JSX。

renderPropertyList() {
  return this.state.cellProperties.map(key => {
    return <PropertyBarItem name={key.nodeName} value={key.nodeValue} />
  })
}