Javascript [React.js]子组件道具不工作

我正在学习React，并试图编写一个程序，在屏幕上显示按键的Unicode。 没有出现错误，但状态（按键和Unicode）也没有打印在屏幕上（状态也相应地发生了变化）。道具设置好了，但不起作用

代码（Javascript）：

const key=props=>{
返回（
{props.key}
）；
}
常量charCode=props=>{
返回（
{props.charCode}
）；
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={key:“A”，charCode:“65”}
this.keydownHandle=this.keydownHandle.bind（this）；
文档.添加的事件列表器（“键控”，函数（事件）{
此.keydownHandle（事件）；
}.约束（这个）；
}
渲染（状态）{
返回(
       
);
}
keydownHandle（事件）{
这是我的国家({
key:String.fromCharCode（event.keyCode），
charCode:event.keyCode
});
}
transitionHandle（）{
document.getElementsByClassName（“键”）.classList.remove（“按下”）；
}
}
render（，document.querySelector（“.container”）；

非常感谢。

几件事

key

是不能作为道具传递的特殊属性之一（来源：）

用户定义的组件必须大写-使用

Key

和

CharCode

而不是

Key

和

CharCode

（来源：）

const key = props=>{
return (<p className="key" onTransitionEnd={props.transitionHandle}>{props.key}</p>);
    }

const charCode = props=>{
  return (<p className="charCode">{props.charCode}</p>);
}



class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {key: "A", charCode: "65"}
    this.keydownHandle = this.keydownHandle.bind(this);

  document.addEventListener("keydown",function(event){
      this.keydownHandle(event);
      }.bind(this));
  }
  render(state){
    return (
      <div className="box">
        <charCode charCode={this.state.charCode}></charCode>
        <key onTransitionEnd={this.transitionHandle} key={this.state.key}></key>
      </div>
    );
  }
    keydownHandle(event){
    this.setState({
      key: String.fromCharCode(event.keyCode),
      charCode: event.keyCode
      });

  }
      transitionHandle(){ 
  document.getElementsByClassName("key").classList.remove("pressed");

  }
}

ReactDOM.render(<App/>,document.querySelector(".container"));