如何将道具传递给反应组件？

Question

对于“请在我的代码中找到错误”问题表示歉意，但我正在努力尝试掌握 React。

我正在尝试将名为 hashRoute 的变量传递给 react 中的组件，但每当我尝试在组件渲染方法中使用 this.props.route 访问道具时，都会收到浏览器警告：

“警告：标签上的未知道具route。从 元素。

我的组件：

var App = React.createClass({
    render: function(){
        var Child;
        switch(this.props.route)
        {
            case 'about':
                Child = about;
                break;
            default: 
                Child = Home;
                break;
        }

        return (
            <div>
                <Child/>
            </div>
        );
    }
});

调用函数：

function render(){
    var hashRoute = window.location.hash.substr(1);
    ReactDOM.render(<app route = {hashRoute} />, document.getElementById('app'));
}

window.addEventListener('hashChange', render);

我显然做错了什么，但我不完全确定是什么。我也尝试过使用扩展语法（将<app route = {hashRoute} /> 替换为<app {...hashRoute} />，但随后我收到另一个浏览器警告，告诉我React.__spread is deprecated and should not be used.

任何想法将不胜感激。

Answer 1

关于 React 组件的一个鲜为人知的事实：组件的名称必须以大写字母开头。这是为了与 React 中为 HTML 保留的组件（如 div、span 等）区分开来。