开发者问题收集

如何将 props 传递给反应组件?

2017-03-23
709

对于“请在我的代码中找出错误”的问题,我深表歉意,但是我在尝试掌握 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 已被弃用,不应使用。

任何想法都将不胜感激。

1个回答

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

Rob Brander
2017-03-23