[英]How to use react components from other files
I have a simple reactJS component like this : 我有一个简单的reactJS组件,如下所示:
var LikeCon = React.createClass({
render: function() {
return (
<span>Like</span>
);
}
});
This is placed in a file called Common.jsx. 它放在名为Common.jsx的文件中。 Im trying to use this LinkeCon component from antoher jsx file like this
我试图像这样使用antoher jsx文件中的这个LinkeCon组件
var FeedTopic = React.createClass({
render: function() {
var test = false;
return (
<div className="topic">
{LikeCon}
</div>
);
}
});
The problem is that this exception is thrown 问题是抛出了这个异常
Error while rendering "FeedBox" to "react1": ReferenceError: LikeCon is not defined
将“FeedBox”渲染为“react1”时出错:ReferenceError:未定义LikeCon
This is how the import looks like on the Layoutpage 这是导入在布局页面上的样子
<script src="@Url.Content("~/Scripts/Common.jsx")"></script>
<script src="@Url.Content("~/Scripts/Grid.jsx")"></script>
<script src="@Url.Content("~/Scripts/Feed.jsx")"></script>
My thought was that if Common.jsx that contains the shared component was first, then the var would also be available to the other react components? 我的想法是,如果包含共享组件的Common.jsx是第一个,那么var也可用于其他反应组件?
Edit : 编辑:
this is placed on the Layout.cshtml 这是放在Layout.cshtml上
<script type="text/jsx" src="@Url.Content("~/Scripts/JSXTransformer.js")"></script>
<script type="text/jsx" src="@Url.Content("~/Scripts/Common.jsx")"></script>
<script type="text/jsx" src="@Url.Content("~/Scripts/Grid.jsx")"></script>
<script type="text/jsx" src="@Url.Content("~/Scripts/Feed.jsx")"></script>
The component is now refered to with <LikeCon like="0" />
instead of {LikeCon}
. 该组件现在
<LikeCon like="0" />
而不是{LikeCon}
。
Edit 2 : 编辑2:
This is how I use the LikeCon 这就是我使用LikeCon的方式
var TopicComments = React.createClass({
render: function() {
var comment = this.props.data.map(function(com, i) {
return (
<article key={i}>
<div className="commentCon">
<div className="tUImgLnk">
<a title={com.UserName} target="_blank" href={com.UserInfoUrl}>
<img className="tUImg" src={com.UserPicSrc} />
</a>
</div>
<b><a href="#" title={"Visit " + com.UserName} target="_blank">{com.UserName}</a></b> :
<span className="content">
{com.Message}
</span>
<div className="status">
<div className="dateCreated dimText">
{com.DateCreated}
</div>
<LikeCon initialLike={com.Like} initialLikeCount={com.LikeCount} objectId={com.Id} categoryKey={1} userId={this.props.userId} />
<article></article>
</div>
</div>
</article>);
}.bind(this));
return(
<div className="comments">
{comment}
</div>
);
}
});
This is how the script import looks like 这是脚本导入的样子
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.autosize.min.js")"></script>
<script src="@Url.Content("~/Scripts/spin.min.js")"></script>
<script src="@Url.Content("~/Scripts/JSXTransformer.js")"></script>
<script src="@Url.Content("~/Scripts/Grid.jsx")"></script>
<script src="@Url.Content("~/Scripts/Feed.jsx")"></script>
@RenderSection("ScriptFoot", required: false)
@Html.ReactInitJavaScript()
</body>
This is the exception I get : 这是我得到的例外:
Error while rendering "FeedBox" to "react1": ReferenceError: LikeCon is not defined at React.createClass.render (Script Document [7]:83:33) -> React.createElement(LikeCon, {initialLike: this.props.data.Like, i at Script Document [2]:7021:34 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6563:14 at wrapper (Script Document [2]:12893:21) at ReactMultiChild.Mixin.mountChildren (Script Document [2]:12352:42)
将“FeedBox”渲染为“react1”时出错:ReferenceError:在React.createClass.render中没有定义LikeCon(脚本文档[7]:83:33) - > React.createElement(LikeCon,{initialLike:this.props.data .Like,i at Script Document [2]:7021:34 at wrapper(Script Document [2]:12893:21)at Script Document [2]:6563:14 at wrapper(Script Document [2]:12893:21)在ReactMultiChild.Mixin.mountChildren(Script Document [2]:12352:42)
at ReactDOMComponent.Mixin._createContentMarkup (Script Document [2]:7801:32) at Script Document [2]:7723:14 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6569:44 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6569:44 at wrapper (Script Document [2]:12893:21) at Script Document [2]:13797:38 at Mixin.perform (Script Document [2]:16855:20) at renderToString (Script Document [2]:13795:24) at Script Document [9] [temp]:1:7 Line: 7021 Column:34at ReactDOMComponent.Mixin._createContentMarkup(Script Document [2]:7801:32)at Script Document [2]:7723:14 at at wrapper(Script Document [2]:12893:21)at Script Document [2]:6569:44 at wrapper(Script Document [2]:12893:21)at Script Document [2]:6569:44 at wrapper(Script Document [2]:12893:21)at Script Document [2]:13797:38 at Mixin.perform (脚本文档[2]:16855:20)at ScriptToString(Script Document [2]:13795:24)at Script Document [9] [temp]:1:7 Line:7021专栏:34
<script src="Scripts/JSXTransformer.js"></script>
<script src="Scripts/JSXTransformer.js"></script>
{LikeCon}
use <LikeCon/>
{LikeCon}
使用<LikeCon/>
type="text/jsx"
in your scripts type="text/jsx"
Make sure you export your LikeCon
component, and import it in the file you want to use it in. 确保导出
LikeCon
组件,并将其导入要使用它的文件中。
var LikeCon = React.createClass({
render: function() {
return (
<span>Like</span>
);
}
});
should be: 应该:
class LikeCon extends React.Component{
render() {
return
<span>Like</span>
);
}
}
export default LikeCon
Then on whatever file(s) you wanted to use LikeCon
component include this at the top of your file: 然后,在您想要使用的任何文件上,
LikeCon
组件包含在您文件的顶部:
import LikeCon from'./path/to/LikeCon.jsx;
Note: my answer is using ES2016...syntax is a tad different. 注意:我的答案是使用ES2016 ...语法有点不同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.