我有两个组件。在第一个组件中，我有一个按钮。单击按钮我想导航到另一个组件或另一个页面。
这是我的代码 http://codepen.io/naveennsit/pen/pymqPa?editors=1010
class App extends React.Component {
handleClick(){
alert('---');
}
render() {
return <button onClick={this.handleClick}>hello</button>
}
}
class Second extends React.Component {
render() {
return <label>second component</label>
}
}
React.render( <App /> , document.getElementById('app'))
最佳答案
这里有两种方法，都相当简单。
方法 1:使用 React Router
确保您已经在项目中的某处设置了路由。它至少应该包含以下信息:路径和组件。应该这样定义:
import YourComponent from "./path/of/your/component";
<Route path="/insert/your/path/here" component={YourComponent} />
接下来，你想更新你的 handleClick 函数来使用来自 react-router-dom 的 Link(可能需要安装这个包如果您还没有使用 npm i react-router-dom)。
删除这个(你的 handleClick 函数你不需要它与 Link):
handleClick(){
alert('---');
}
render() {
return <button onClick={this.handleClick}>hello</button>
}
}
现在将您的渲染方法更改为:
render() {
return (
<div>
<Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
</div>
);
}
}
为 Link 提供与您的按钮相同的类名，以便将其样式设置为按钮而不是 anchor 标记。
把它们放在一起。
//无论你的路由器在哪里，都有你的路由
import YourComponent from "./path/of/your/component";
<Router>
<Route exact path="/insert/your/path/here" component={YourComponent} />
</Router>
//具有handleClick功能的组件
import { Link } from "react-router-dom";
class App extends Component {
render() {
return(
<div>
<Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
</div>
);
}
}
方法 2:使用 window.open
还是要确保你的路由设置和上面一样。这里的区别在于您将不会使用 Link，这意味着您将需要 handleClick 函数。这将是唯一改变的事情。
改变这个:
handleClick(){
alert('---');
}
为此:
handleClick(){
window.open("/insert/your/path/here");
//this opens in a new tab (believe that is what the owner of the question wanted if not you can do window.location.href = "/insert/your/path/here".
}
就是这样。如果你想让你的路径动态化，这意味着它们包含变量，如 id 或名称等。见下文。
动态路径
动态路径可以包含名称和 ID 或您想要的任何变量。您首先必须调整您的路线，然后相应地更改您的链接或位置。
将路由更改为:
<Route path="/insert/your/path/here/:name" component={YourComponent} />
注意冒号 (:)，这允许您通过变量在此处注入(inject)字符串。
更新您的链接:
<Link to={`/insert/your/path/here/${variableName}`}>hello</Link>
如果你正在使用 window.open 像这样更新它:
window.open(`/insert/your/path/here/${variableName}`);
这里有几点需要说明。你在等号后使用方括号，因为这告诉 React，嘿，我需要在这里输入一个变量。接下来注意反勾 ` 这告诉 React 你正在使用一个字符串文字，这意味着嘿我希望你将它解释为一个字符串但首先在这里获取我的变量的值并为我转换成一个字符串。 ${} 允许您放置一个变量，以便 React 可以正确地解释它。所以总的来说，React 将该行读取为:将用户带到路径“/insert/your/path/here/valueOfVariablName”然后 React 检查该路径的路由并说嘿我们有一些东西是“/insert/your/path/here/:name"所以 :name 必须等于 valueOfVariableName。希望这有点道理。您可以在控制台中验证动态路径。记录你的 Prop 。您应该会看到一个包含位置、历史记录等的对象。
您还可以阅读更多关于 React-Router 的信息 here .原始链接:https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
谁有更好的资源。请随时编辑我的答案或发表评论。
我希望这对遇到这个问题的人有所帮助。顺便说一句，您也可以通过 Link 传递状态。如果您想知道如何做到这一点，请发布另一个问题。
关于javascript - 如何在 React JS 中从一个页面导航到另一个页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37295377/
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby中使用两个参数异步运行exe吗？我已经尝试过ruby命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何rubygems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象