Question

道歉，请注意我的代码中的错误＆＃39;问题，但我正在努力试图掌握React。

我试图将名为hashRoute的变量传递给react中的组件，但每当我尝试使用组件呈现方法中的this.props.route访问prop时，我会收到浏览器警告话说：

＆＃34;警告：标记上的未知道具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组件的一个鲜为人知的事实：组件的名称必须以大写字母开头。这是为了区别于为HTML保留的React中的组件（如div，span等）。

如何将props传递给react组件？

1 个答案: