Access React tree from within a component

Is there a way to access the React tree down a component from within it? For instance when I use the React-devtool extension I am able to navigate along the React tree. Is it possible to do such navigation from within the code of a component to know everything below it? I know about children, but it does not work when parents components simply render children components, ie in Parent componen

从组件内访问React树

有没有办法从内部访问React树中的一个组件? 例如,当我使用React-devtool扩展时,我可以沿着React树进行导航。 是否有可能从组件的代码中进行这种导航,以了解它下面的所有内容? 我知道孩子,但父母组件只是呈现儿童组件时,它不起作用,即在Parent组件中,我有类似的东西 render() { <Child1 /> } 然后在我拥有的Child1组件中 render() { <Child2 /> } 等等 我想从知道Paren

How to access DOM event

I am building a simple static view-engine using React with the goal of rendering static HTML-markup and generating a js-file filled with that components DOM-events (onClick, etc). The way I'm doing the first part is to require a specified JSX-file which, for example, looks like this: import React from 'React'; export default class Test extends React.Component { clicked() { al

如何访问DOM事件

我使用React构建了一个简单的静态视图引擎,其目标是呈现静态HTML标记并生成一个填充了组件DOM事件(onClick等)的js文件。 我做第一部分的方式是需要一个指定的JSX文件,例如,看起来像这样: import React from 'React'; export default class Test extends React.Component { clicked() { alert('Clicked the header!'); } render() { return ( <html> &

ES6 + React Component Instance Method

I'm making a small Video component in React (for you guessed it, playing videos) and I want to embed that component inside a parent component and then be able to call a play method on the video component. My video component looks like: import React, { Component, PropTypes } from 'react'; import ReactDOM from 'react-dom'; const { string, func } = PropTypes; export default class Video exten

ES6 + React组件实例方法

我在React中制作了一个小的Video组件(因为你猜对了,正在播放视频),我想将该组件嵌入到父组件中,然后能够在视频组件上调用play方法。 我的视频组件如下所示: import React, { Component, PropTypes } from 'react'; import ReactDOM from 'react-dom'; const { string, func } = PropTypes; export default class Video extends Component { static propTypes = { source: string.isRequired, type: string.i

Importing CSS files in Isomorphic React Components

I have a React application with Components written in ES6 - transpiled via Babel and Webpack. In some places I would like to include specific CSS files with specific Components, as suggested in react webpack cookbook However, if in any Component file I require a static CSS asset, eg: import '../assets/css/style.css'; Then the compilation fails with an error: SyntaxError: <PROJ

在同构React组件中导入CSS文件

我有一个使用ES6编写的组件的React应用程序 - 通过Babel和Webpack传输。 在一些地方,我想包含特定的CSS文件和特定的组件,如反应webpack食谱中所建议的 但是,如果在任何组件文件中需要静态CSS资源,例如: import '../assets/css/style.css'; 然后编译失败并出现错误: SyntaxError: <PROJECT>/assets/css/style.css: Unexpected character '#' (3:0) at Parser.pp.raise (<PROJECT>node_modu

React Router v4 navigation programmatically

When I use react router with Redirect, Link or NavLink eveything is fine. But I need a function that navigates me to a route programmatically. That is what I want : if(a == 1){ this.context.history.push("/") } else { this.contetx.history.push("/home"); } As you see context history is not exists in react router v4 any more. I cannot write withroute in js code for navigation. Can any

以编程方式反应路由器v4导航

当我使用Redirect的反应路由器时,Link或NavLink eveything都可以。 但是我需要一个能够以编程方式导航到路线的功能。 这就是我想要的: if(a == 1){ this.context.history.push("/") } else { this.contetx.history.push("/home"); } 正如你所看到的,上下文历史在反应路由器v4中不再存在。 我无法使用js代码导航编写路由。 任何人都可以说我如何直接在js代码中导航? 谢谢 路由器会为你的道具​​添加history

Persistent Navigation React

New to React and having troubles trying to create a persistent navigation across my application using React-Router. Using the create-react-app and "react-router": "^3.0.2" I'm trying to just have a Navigation on the top of the page with a couple of links. The error I keep getting is Uncaught Error: <Link>s rendered outside of a router context cannot navigate.

持续导航反应

React的新手和尝试使用React-Router在我的应用程序中创建持久导航的麻烦。 使用create-react-app和"react-router": "^3.0.2" 我正在尝试在页面顶部添加一些导航,并附带一些链接。 我一直收到的错误是Uncaught Error: <Link>s rendered outside of a router context cannot navigate. index.js: import React from 'react'; import ReactDOM from 'react-dom'; import { browserHistory } fro

javascript

I'm exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator component - http://facebook.github.io/react-native/docs/navigator.html#content The main app class renders navigator and inside renderScene returns passed component: class App extends React.Component { render() { return ( <Navigat

JavaScript的

我正在探索React Native的可能性,同时在Navigator组件的帮助下开发一个在视图之间定制导航的演示应用程序 - http://facebook.github.io/react-native/docs/navigator.html#content 主应用程序类呈现导航器,并在renderScene返回传递的组件: class App extends React.Component { render() { return ( <Navigator initialRoute={{name: 'WelcomeView', component: WelcomeView}}

Client Routing (using react

I have been thinking and I am confused with the routing between Client and Server. Suppose I use ReactJS for server-side rendering before sending the request back to web browser, and use react-router as a client-side routing to switch between pages without refreshing as SPA. What comes to mind is: How are the routes interpreted? For example, a request from Home page ( /home ) to Posts page

客户端路由(使用反应

我一直在想,我对客户端和服务器之间的路由感到困惑。 假设我在将请求发送回Web浏览器之前使用ReactJS进行服务器端渲染,并使用react-router作为客户端路由在页面之间进行切换,而无需刷新SPA。 想到的是: 路线如何解释? 例如,从主页( /home )到帖子页面( /posts )的请求, 路由在服务器端或客户端上到达哪里? 它如何知道它是如何处理的? 请注意,这个答案涵盖了React Router版本0.13.x--即将到来的版本1.0

reactRouter.withRouter) is not a function when navigating to route programmatically in react

I am using react-router 2.4.0 and want to link to another route programmatically (what I did before using <Link> ). It's explained nicely in this SO post where they say in 2.4.x you should use the decorator pattern with withRouter , so I am using the following code: import {withRouter} from 'react-router' // further imports omitted class CreateJobItemFormRaw extends React.Component

reactRouter.withRouter)在以编程方式导航进行反应时不是函数

我正在使用react-router 2.4.0并且希望以编程方式链接到另一条路由(我在使用<Link>之前所做的)。 在这个SO帖子里很好的解释了他们在2.4.x说你应该在withRouter使用装饰器模式,所以我使用下面的代码: import {withRouter} from 'react-router' // further imports omitted class CreateJobItemFormRaw extends React.Component { ... } const CreateJobItemForm = withRouter(CreateJobItemFormRaw) export defa

javascript

I have the following structure for my React.js application using React Router: var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route

JavaScript的

对于使用React Router的React.js应用程序,我有以下结构: var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index