javascript - 如何将 Prop 传递给 react 组件？

Question

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

我正在尝试传递一个名为 hashRoute 的变量到 react 中的组件，但每当我尝试使用 this.props.route 访问 Prop 时在组件渲染方法中，我收到一条浏览器警告:

"Warning: Unknown prop route on tag. Remove this prop from the element.

我的组件:

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 等)。