在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>)