Reactjs 使用react将键索引号打印到html中

我想在迭代中打印出数字列表，我做错了什么

main.js组件：

export class Main extends Component {
  render() {
    return (
      <div>
        <div className="wrapper">
          <h1>car2go data</h1>
          {Car2go.placemarks.map((content, index) => {
            return <RenderTable content={content} key={index} />;
          })}
        </div>
      </div>
    );
  }
}

export default Main;

renderTable.js组件

import React, { Component } from "react";

export class RenderTable extends Component {
  render() {
    const { content } = this.props;
    const { key } = this.props;
    return (
      <div>
        <p>
          <span>{key}</span>
          {content.address}
        </p>
      </div>
    );
  }
}

export default RenderTable;

我可以打印内容。地址值，对于每个迭代，但我想给列表编号，这就是为什么我在前面加了一个跨度。我甚至可以看到key属性在inspector模式下打印出数字，但我需要在HTML中这样做

react中的键有一个特殊的含义，它对于列出和唯一标识元素非常有用。除非用于唯一列表，否则不要将密钥用作道具

试着换掉这个,

<RenderTable content={content} key={index} />

有了这个,

<RenderTable content={content} ind={index} />

像这样使用,

export class RenderTable extends Component {
  render() {
    const { content } = this.props;
    const { ind } = this.props;
    return (
      <div>
        <p>
          <span>{ind}</span>
          {content.address}
        </p>
      </div>
    );
  }
}

您正在尝试在组件中使用关键道具。但那个关键道具只供react内部使用。因此，默认情况下，该键不包括在this.props中。因此，您需要使用“key”以外的其他道具名称来传递索引

所以，请把这个从

到

然后可以使用num-like

希望这有帮助

export class RenderTable extends Component {
  render() {
    const { content } = this.props;
    const { num } = this.props;
    return (
      <div>
        <p>
          <span>{num}</span>
          {content.address}
        </p>
      </div>
    );
  }
}