在React中渲染組件實例

Question

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

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未被捕獲的ReferenceError：未定義NavBar

我不太確定發生了什么。 據我了解， NavBar應該在Page范圍內可用。

謝謝！

Answer 1

看起來您混合了函數返回方法和粗箭頭方法來返回地圖

當在=>之后使用{}時，意味着您在其中編寫的內容都是函數的主體。 在這種情況下，您需要編寫一個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語句，並且如果我們跳過方括號並將內容放在括號中，則JSX會在內部function body with a return語句將其填充到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>;
  }
});

我想我能正確解釋嗎

Answer 2

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 。 所以沒有雙引號。

Answer 3

您錯過了map回調函數中的return語句。 map函數應始終返回數組的已修改元素。

更換

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

同

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