[英]Rendering a Component Instance in React
I am trying to render an instance of a Component Class from another Component Class in React. 我正在尝试从React中的另一个组件类渲染一个组件类的实例。 But for some reason, the browser complains that the component instance is not defined.
但是由于某种原因,浏览器会抱怨未定义组件实例。 I have it all in the same JS file (JS window in Codepen).
我将它们全部放在同一个JS文件中(Codepen中的JS窗口)。 Here's my code -
这是我的代码-
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'));
Here's the app on Codepen . 这是Codepen上的应用程序。 This is the error I get -
这是我得到的错误-
pen.js:13 Uncaught ReferenceError: NavBar is not defined
pen.js:13未被捕获的ReferenceError:未定义NavBar
I'm not quite sure what's going on. 我不太确定发生了什么。
NavBar
should be available in the scope of Page
, as far as I understand. 据我了解,
NavBar
应该在Page
范围内可用。
Thanks! 谢谢!
Looks like you mixed the function return approach and the fat arrow approach to return the map 看起来您混合了函数返回方法和粗箭头方法来返回地图
when you use {}
after the =>
it means that whatever you are writing inside it is the body of the function. 当在
=>
之后使用{}
时,意味着您在其中编写的内容都是函数的主体。 In that case you need to write a return
statement like 在这种情况下,您需要编写一个
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>;
}
});
The other way is to skip the function body and directly return the statement. 另一种方法是跳过函数主体并直接返回语句。 It works well because the map function only contains the return statement and if we skip the brackets and put the content in the parentesis then
JSX
will internally convet it into the function body with a return
statement. 它之所以有效,是因为map函数仅包含return语句,并且如果我们跳过方括号并将内容放在括号中,则
JSX
会在内部function body with a return
语句将其填充到function body with a return
。 It is much liuke the lambda functions
being introduced in Java8
liuke的是多
lambda functions
在引入Java8
You can use it like 你可以像这样使用它
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>;
}
});
I suppose am I able to explain it properly 我想我能正确解释吗
var navLinks = pages.map((page) => <a href={'/' + page}>{page}</a>);
No curly braces, no return
statement. 没有花括号,没有
return
语句。 I like eslint :) 我喜欢eslint :)
Pen: http://codepen.io/free-soul/pen/dOdNby 笔: http : //codepen.io/free-soul/pen/dOdNby
Note that I also removed the surrounding double-quotes on the value passed to href
. 请注意,我还删除了传递给
href
的值周围的双引号。
Previously it was this: <a href="{'/' + page}">{page}</a>
以前是这样的:
<a href="{'/' + page}">{page}</a>
for all values of page, the link url becomes : www.example.com/{'/' + page}
对于页面的所有值,链接URL变为:
www.example.com/{'/' + page}
but I think you wanted it like this: www.example.com/contact
. 但我认为您想要这样:
www.example.com/contact
。 So no double-quotes. 所以没有双引号。
You have missed the return statement in the callback to map function. 您错过了map回调函数中的return语句。 map function should always return a modified element of array.
map函数应始终返回数组的已修改元素。
Replace 更换
<a href="{'/' + page}">{page}</a>
with 同
return (<a href="{'/' + page}">{page}</a>)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.