key已在 React 中删除了访问权限。

props 键和 ref 已经是保留的属性名称。
...
您不能再从 Component 实例本身内部访问 this.props.ref 和 this.props.key 。 https://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#break-change-key-and-ref-removed-from-this.props

您可以简单地使用不同的名称（例如'reactKey'）并通过props访问它。这是一个演示：http : //codepen.io/PiotrBerebecki/pen/PGaxdx

class App extends React.Component {
  render() {
    return (
      <div>
        <Child key="testKey1" keyProp="testKey1"/>
        <Child key="testKey2" keyProp="testKey2"/>
        <Child key="testKey3" keyProp="testKey3"/>
        <Child key="testKey4" keyProp="testKey4"/>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log(this.props);  // only 'keyProp' is available

    let getClassName = () => {
      switch (this.props.keyProp) {
        case 'testKey1': 
          return 'red';
        case 'testKey2': 
          return 'green';
        case 'testKey3': 
          return 'blue';
        default: 
          return 'black';
       }
    };

    return (
      <div className={getClassName()}>
        Some Text
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

如果您想访问 React 元素的 DOM 节点，请使用refprop。
但在大多数情况下，您可以在不使用 Refs 的情况下实现您的目标，因此请确保您没有滥用此功能。

以下是 React 文档中的一些信息：Refs and the DOM - React

Refs 和 DOM

Refs 提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。

何时使用参考

refs 有一些很好的用例：

• 管理焦点、文本选择或媒体播放。
• 触发命令式动画。
• 与第三方 DOM 库集成。

避免对任何可以声明性完成的事情使用 refs。

创建参考

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

访问参考

const node = this.myRef.current;