在React中呈現組件實例

我想從React中的另一個組件類呈現組件類的實例。但由於某種原因，瀏覽器抱怨組件實例未定義。我把它全部放在同一個JS文件（Codepen中的JS窗口）中。這是我的代碼 -在React中呈現組件實例

var NavBar = React.createClass({ 
    render: function() { 
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact']; 
    var navLinks = pages.map((page) => { 
     <a href="{'/' + page}">{page}</a> 
    }); 

    return <nav>{navLinks}</nav>; 
    } 
}); 

var Page = React.createClass({ 
    render: function() { 
    return (
     <div> 
      <h1 className="text-primary">Welcome!</h1> 
      <NavBar /> 
      <h2 className="text-primary">About Me</h2> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(<Page />, document.getElementById('app'));

以下是關於Codepen的應用程序。這是我得到的錯誤 -

pen.js:13 Uncaught ReferenceError: NavBar is not defined

我不太確定發生了什麼事。就我所知，NavBar應該在Page的範圍內。

謝謝！

來源

2016-12-03 Manish Giri

對我來說，它運作良好 - http://codepen.io/anon/pen/GNQNYp？編輯器= 1010，'.map'中只有一個音符添加'return'語句或使用'pages.map（（page）=>（{page}））;'。另外不要忘記爲循環內的元素添加'key' –

我明白了。我想我對[ES6胖箭頭隱式返回]的概念感到困惑（https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/）。我也不確定爲什麼缺少'return'在這裏創建一個問題，當它似乎在這裏工作 - 'var multiply =（x，y）=> x * y;' 感謝您的幫助！ –

看起來你混合函數返回的方法和脂肪的箭頭方法時，你就意味着=>後使用{}返回地圖

無論你在裏面寫什麼都是函數的主體。在這種情況下，你需要寫一個return聲明像

var NavBar = React.createClass({ 
    render: function() { 
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact']; 
    var navLinks = pages.map((page) => { 
     return <a href="{'/' + page}">{page}</a> 
    }); 

    return <nav>{navLinks}</nav>; 
    } 
});

另一種方法是跳過函數體和直接返回語句。它的效果很好，因爲map函數只包含return語句，如果我們跳過括號並將內容放入parentesis中，JSX將在內部將其轉化爲function body with a return語句。這是很liuke的lambda functions在Java8

引入您可以使用它像

var NavBar = React.createClass({ 
    render: function() { 
    var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact']; 
    var navLinks = pages.map((page) => (<a href="{'/' + page}">{page}</a>)); 

    return <nav>{navLinks}</nav>; 
    } 
});

我想我是能夠解釋正確

來源

2016-12-03 07:38:29

是的，我現在明白了！謝謝！ –

您錯過了回調映射函數中的return語句。 map函數應該總是返回數組的修改後的元素。

更換

<a href="{'/' + page}">{page}</a>

與

return (<a href="{'/' + page}">{page}</a>)

來源

2016-12-03 07:20:35

var navLinks = pages.map((page) => <a href={'/' + page}>{page}</a>);

沒有大括號，沒有return聲明。我喜歡eslint :)

筆：http://codepen.io/free-soul/pen/dOdNby

請注意，我也刪除傳遞給href值周圍的雙引號。

以前它是這樣的：<a href="{'/' + page}">{page}</a>

對頁面的所有值，鏈接URL變爲：www.example.com/{'/' + page}

但我想你想它是這樣的：www.example.com/contact。所以沒有雙引號。

來源

2016-12-03 08:01:42

感謝您的提示！ –

在React中呈現組件實例

回答

相關問題