phản ứng-router: 'Vi phạm bất biến: Thẻ không hợp lệ: {HelloWorld}', trong khi thành phần nằm ngay tại đó

Question

Tôi mới sử dụng React và đang cố gắng tăng tốc với bộ phản ứng (v1.0.0).

Tôi đã thiết lập một thành phần đơn giản và một tuyến đường đơn giản, nhưng nó cho tôi một lỗi: Invariant Violation: Invalid tag: {HelloWorld}. Bạn sẽ nghĩ rằng đó là một lỗi rõ ràng, nhưng tôi không thể tìm ra những gì sai với mã.

Ở đây là:

var HelloWorld = React.createClass({ 
    render: function() { 
     return (
      <p>Hello world</p> 
     ); 
    } 
}); 

var routes = (
    <Router> 
     <Route path="/" component="{HelloWorld}"/> 
    </Router> 
); 

ReactDom.render(routes, document.querySelector('#main')); 

Nếu tôi chuyển ra routes với <HelloWorld /> trong báo cáo ReactDom.render, nó hoạt động tốt.

Bất kỳ trợ giúp nào được đánh giá cao!

Answer 1

Nếu bạn nhìn vào tài liệu một lần nữa, bạn sẽ thấy rằng component hy vọng một tham chiếu đến một thành phần, không phải là một chuỗi:

component={HelloWorld} 
//  ^  ^

Trong JSX giá trị thuộc tính, "..." đại diện cho một chuỗi (giống như trong JavaScript) và {...} đại diện cho một biểu thức JavaScript tùy ý. Do đó, "{HelloWorld}" rất khác với {HelloWorld}.