javascript - [React.js]子组件 Prop 不起作用

Question

我正在学习 React，并试图编写一个程序，在屏幕上显示按下的按键的 Unicode。没有弹出错误，但状态(按下的键和 Unicode)也没有打印在屏幕上(状态相应地改变了)。 Prop 已设置，但不起作用。

Codepen

代码(Javascript):

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"));

非常感谢。

Answer 1

有几件事

codepen

1. key 是不能作为 props 传递的特殊属性之一(来源: https://facebook.github.io/react/docs/lists-and-keys.html )

2. 用户定义的组件必须大写 - 使用 Key 和 CharCode 而不是 key 和 charCode (来源:https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)