个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的应用程序中，我使用 React.js 作为我的 JavaScript 框架，并结合 React-router 进行导航。
我在替换主容器 div 的内容时遇到问题。当我访问某些新路由时，会调用 render 方法激活适当的路由处理程序，但该 html 会附加到主容器 div 的现有内容中，我需要将其替换。
Page2Handler 仅将其 html 附加到应用程序处理程序在初始页面加载时呈现的现有 html。
我在这里做错了什么？
路由器.jsx:
var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, RouteHandler, Link } = Router;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var App = require('./app');
var Page2Handler = require('./pages/Page2Handler');
var MyRoutes = (
<Route name="app" path="/" handler={App}>
<Route name="page2" path="/page2" handler={Page2Handler} />
</Route>
);
module.exports=MyRoutes;
client.jsx:
var MyRoutes = require('./router');
Router.run(MyRoutes, function (Handler) {
React.render(<Handler/>, document.getElementById('container'));
});
索引.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src=""~/build/client.js"></script>
</body>
</html>
Page2Handler:
var React = require('react');
var Page2Handler = React.createClass({
mixins: [ Router.State ],
render: function() {
return (
<div>Hello Page2Handler </div>
);
}
});
module.exports=Page2Handler;
App.jsx:
var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, RouteHandler, Link } = Router;
var Header = require('./modules/header');
var Footer = require('./modules/footer');
var SearchPartners = require('./modules/partners/search-partners')
var App = React.createClass({
render: function() {
return (
<div>
<Header />
<div id="body">
<SearchPartners />
<RouteHandler />
</div>
<Footer />
</div>
);
}
});
module.exports=App;
最佳答案
在这种情况下，Page2Handler 是在 App 内呈现的 - 如果您查看路由的结构，以及如何在 App 内呈现 RouteHandler，应该很容易明白原因。
要解决此问题，您需要有一个通用父页面，例如包含页眉和页脚，然后将 App 和 Page2Handler 路由与 DefaultRoute 置于同一级别，如下所示:
<Route name="someparent" path="/" handler={ParentHandler}>
<DefaultRoute handler={App}>
<Route name="page2" path="/page2" handler={Page2Handler} />
</Route>
希望这是有道理的。
关于reactjs - 与 react 路由器 react : render component by replacing content in an element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29061195/
25
4
0
我正在从一个旧数据库中选择数据，该数据库有一个滥用状态列。状态列中包含多条信息。值如“新联系人 YYYY”、“在线 YYYY”、“更新 YYYY”、“撤回 YYYY”等……。您可能已经猜到了，YYYY
我想使用ant的replace任务替换这样的文件之一中的 token : 版本.txt version.number=${versionNumber} build.gradle task writeV
sorted_elems 列表中有一些元素将被更改为 str 例如: sorted_elems = ['[abc]', '[xyz]', ['qwe']] 我想删除定义的字符 - [, ], ' 并打
如果替换在变量中传递，第一次和第二次替换是否等效？ #!/usr/bin/env perl6 use v6; my $foo = 'switch'; my $t1 = my $t2 = my $t3
我正在做一个本地测试来比较 C# 中 String 和 StringBuilder 的 Replace 操作性能，但是对于 String 我使用了以下代码: String str = "String
我看到了所有内容，没有看到使用“--replace”的方式的内容。 如何在 wkhtmltopdf 中使用“--replace”。 请给我一个例子，谢谢。:) 最佳答案 假设您有一个页脚 my_foo
我需要在 50 多个文件中进行大量搜索/替换，并且正在使用 Sublime Text 3。 有没有办法逐步执行并交互确认每个更改？我不想要只执行所有替换的一揽子“全部替换”操作。 我正在思考 vi/v
那么“replace ”属性如何与 composer 一起使用？ ？我已经阅读了 Composer 文档，但仍然不明白。搜索更多信息并没有回答我的问题。 当我查看Laravel/Framework上的
我在玩 F# 句法。 在瑞典，我们有一个游戏叫做“Backslang”(谷歌翻译自“Rövarspråk”) 规则很简单。你说的所有话都必须以特定的方式说出来。虽然人声是相同的，但每个辅音都必须用“o
是否可以在Atom或Sublime Text中对“item”一词使用“查找和替换”并将其替换为“item [i]”，其中[i]是从1开始的数字？ 我有一堆看起来像这样的物品: item1 item1
我不太确定如何解释，所以我将从输出开始。我需要返回这个: { replies: [ { type: 'text', content: 'one' } { type:
我是 C# 的新手，所以请原谅我的错误。 我想在每次调用该段代码时(每次调用 2-4 次)替换字符串的某些部分。我想知道哪种方法在性能方面更好:string.Replace 或 stringBuild
我了解.Replace() 和-replace 之间的区别，但是什么是-replace 和[Regex]: :替换()? 我测试了以下 2 个代码，但对我来说结果完全一样。 我还引用了 PowerSh
如果我正在做类似的事情: someString.Replace("abc","").Replace("def","").Replace(@"c:\Windows","") 我怎样才能把它替换成 Reg
我是 C# 的新手，所以请原谅我的错误。 我想在每次调用该段代码时(每次调用 2-4 次)替换字符串的某些部分。我想知道哪种方法在性能方面更好:string.Replace 或 stringBuild
当我使用 call() 或 apply() 时，我遇到了问题。 console.log(String.prototype.replace === String.replace);//false 我认为
在我使用 5-10 个替换的情况下是否有必要使用 stringbuilder。 String someData = "......"; someData = someData.replaceAll("
我有一个字符串，我需要用字典中的值替换其中的标记。它必须尽可能高效。使用 string.replace 进行循环只会消耗内存(记住，字符串是不可变的)。 StringBuilder.Replace()
我正在使用具有许多不同库依赖项的 gradle 项目并使用新的 list 合并。在我的 标签我已经这样设置了: .... 但我收到错误消息: /android/MyApp/app/src/main
我正在尝试从一个数据库中的表中提取模式并将其传输到另一个数据库。以下是执行此操作的函数的一部分。 当 Table( ... ) 时出错被称为。 功能示例: def transfer_data(self
我是一名优秀的程序员,十分优秀！