Question

我正在尝试使用子组件呈现列表，但最终却没有呈现任何内容。

PropertyBar组件中的代码段：

*://*/*

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

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

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

Answer 2

您缺少return语句：

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

此外，请务必调用该方法：

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

子组件列表未呈现

2 个答案: