天道酬勤,学无止境

react-jsx

How to redirect to home page(in jsx) after logout in react

问题 <li> <a href="homepage.jsx"> <i className="fa fa-sign-out pull-right"></i> Log Out </a> </li> 我在homepage.jsx中有主页组件,单击logout后我需要转到主页组件。 在这方面帮助我。 回答1 您正在使用react-router ,因此不要使用a和href使用Link ,而是这样写: <li> <Link to="/"> <i className="fa fa-sign-out pull-right"></i> Log Out </Link> </li> 由于 Homepage 组件是您的indexroute ,因此导航到/将render它。 如果您想在任何函数内动态导航,请查看以下答案: 在 React-Router v4 中以编程方式导航 回答2 我假设您正在使用 react-router v 2.xx 您可以为此创建一个如下所示的组件。 您的路线还应包含您要重定向到的路线。 <Route path="/" component={App}> <Route path="/homepage" component={Homepage}/> </Route> class Logout extends React.Component { static contextTypes =

2022-07-11 09:58:33    分类:技术分享    html   reactjs   redirect   react-jsx   jsx

Advanced conditional component rendering in react

问题 我在 jsx 中有一个链接。 将来我可能会为链接创建新组件,但现在我想使用简单的 jsx。 我还有一个布尔属性,它告诉我是否应该渲染链接。 如果不是,我想在span或div中呈现纯文本。 这就是我现在的做法: {isPassed && <a href={'/uri'}> <span>Import</span> </a>} {!isPassed && <span>Import</span>} 这就是我可以做得更好的方法: {isPassed && <a href={'/uri'}> <span>Import</span> </a> || <span>Import</span>} 处理这样的条件渲染的最佳实践是什么? 我想让它更具可读性。 第一个示例复制了条件,而在第二个示例中,将呈现什么并不明显。 回答1 您也可以尝试使用三元运算符,我们觉得它对我们来说非常易读。 { isPassed ? <a href={'/uri'}><span>Import</span></a> : <span>Import</span> } 但是在多个条件的情况下,还要编写一个 renderComponent 方法,例如: class SomeComponent extends Component { renderComponent(isPassed) { switch(isPassed) {

2022-05-15 19:47:09    分类:技术分享    reactjs   react-jsx   jsx

Is it possible to communicate between React Applications?

问题 我的项目是三个反应应用程序的旅程,我想使用从应用程序 1 到应用程序 2 和应用程序 2 到应用程序 3 的一些数据。 如果要传递的数据很小,我会在第二个应用程序的 url 中的查询参数中传递它。 如果数据很大或私有,我计划将其作为帖子发送,应用程序 2 将收到该帖子。 有没有更好的方式在反应应用程序之间进行通信? 我可以将每个到达应用程序作为可以将其数据公开给应用程序 2 的库吗? 回答1 您可以使用现在每个浏览器都支持的 postMessage(MDN 链接)。 它是一个跨域、基于事件的消息传递系统,直接在浏览器中运行,具有熟悉的 API。 在您的目标页面中对它们进行操作之前,请务必检查消息的来源! 回答2 如果您在两者之间加载新页面,那么通过帖子发送到服务器是个好主意。 如果不是,则可以将其设置为某个全局位置,例如window.application1Data = { data: data };

2022-05-15 09:55:03    分类:技术分享    reactjs   react-jsx   flux   reactjs-flux

Detect when mobx observable has changed

问题 是否可以检测到可观察对象何时以任何方式发生变化? 例如,假设你有这个: @observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }] 稍后,随着一些用户输入,值会发生变化。 我怎样才能轻松检测到这一点? 我想添加一个全局“保存”按钮,但只有在该 observable 自初始加载后发生变化时才可点击。 我当前的解决方案是添加另一个返回 true/false 的可观察myObjectChanged ,并且无论组件在哪里更改 myObject 中的数据,我还添加一行将 myObjectChanged 更改为 true。 如果单击保存按钮,它会保存该 observable 并将其更改回 false。 这导致大量额外的代码行遍布各处。 有更好/更清洁的方法吗? 回答1 @observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }] @observable state = { dirty: false } let firstAutorun = true; autorun(() => { // `JSON.stringify` will touch all properties of `myObject` so //

2022-05-15 08:49:19    分类:技术分享    reactjs   react-jsx   mobx   mobx-react

Warning: Unknown DOM property class. Did you mean className?

问题 我刚刚开始探索 React,通过添加一个具有简单渲染功能的组件: render() { return <div class="myApp"></div> } 当我运行该应用程序时,我收到以下错误: Warning: Unknown DOM property class. Did you mean className? 我可以通过将class更改为className来解决这个问题。 问题是; React 是否强制执行此约定? 另外为什么我需要使用className而不是传统的class ? 如果这是一个限制,那么是由于 JSX 语法还是其他原因? 回答1 是的,它是一个 React 约定: 由于 JSX 是 JavaScript,因此不鼓励将class和for等标识符用作 XML 属性名称。 相反,React DOM 组件期望 DOM 属性名称分别像className和htmlFor 。 JSX 深入。 回答2 for --> htmlFor class --> className 回答3 在 HTML 中,我们使用 class="navbar" 但是在 React 和 ReactNative 中没有 HTML,我们在这里使用 JSX(Javascript XML) className="navbar" 回答4 Meteor 使用 babel 将 ES5 转译为 ES6

2022-05-11 11:00:08    分类:技术分享    javascript   reactjs   react-jsx

Include component mount point contents in rendered component

问题 我有一个应用程序(内置于 Rails),它在后端呈现一些标记,然后我想使用 ReactJS 在前端“增强”它的附加功能。 渲染内容看起来像这样: <%= react_component :TestComponent do %> <div class="foo"> Here's some content. </div> <% end %> 这个调用创建了一个带有一些data-属性的包装器 div,react_ujs 然后捕获这些属性以实例化 React 组件。 我没有做的是找到一种方法(不使用 jquery 来做一些有点疯狂的技巧)来获取这个 mount 元素的内容(所以,带有类 'foo' 的内部 div 及其内容)在我的React 组件,这样我就可以将它包含在我的 JSX 中。 React.createClass({ render: function() { return ( <div className="my-component"> { mount point contents here! } </div> ); } }); 这种行为在 AngularJS 术语中被描述为“transclude”。 任何想法如何使用 ReactJS 实现这种行为? 我收到了一些指向this.props.children的指针,但这似乎并没有产生我需要的结果,并且即使 mount

2022-05-07 19:08:03    分类:技术分享    javascript   reactjs   react-jsx

React.JS - multiple elements sharing a state ( How do I modify only one of the elements without affecting the others? )

问题 class App extends Component { constructor(props) { super(props); this.state = { Card: Card } } HandleEvent = (props) => { this.SetState({Card: Card.Active} } render() { return ( <Card Card = { this.state.Card } HandleEvent={ this.handleEvent }/> <Card Card = { this.state.Card } HandleEvent={ this.handleEvent }/> ) } } const Card = props => { return ( <div style={props.state.Card} onClick={ props.HandleEvent}>Example</div> ) } 回答1 这是一个工作示例 import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props); this.state = { 0: false, 1: false

2022-05-02 06:00:17    分类:技术分享    javascript   reactjs   functional-programming   react-router   react-jsx

Warning: Unknown DOM property class. Did you mean className?

I've just started exploring React, by adding a component with a simple render function: render() { return <div class="myApp"></div> } When I run the app, I get the following error: Warning: Unknown DOM property class. Did you mean className? I can solve this by changing class to className. The question is; does React enforce this convention? Also why do I need to use className instead of the conventional class? If this is a restriction then is it due to JSX syntax or somewhere else?

2022-04-29 18:15:18    分类:问答    javascript   reactjs   react-jsx

Is it possible to communicate between React Applications?

My project is a journey of three react applications, I want to use some data from application 1 to application 2 and application 2 to application 3. If data to be passed is small, i passed it in query parameter in url of 2nd application. And if data is large or private, i am planning to send it as a post which will be received by application 2. Is there any better way of communicating between react applications? Can i make each reach application as a Library which can expose its data to application 2?

2022-04-29 08:51:02    分类:问答    reactjs   react-jsx   flux   reactjs-flux

How do I transpile React JSX and ES6 modules with babel and use browser native ES6

问题 我遇到的问题是在使用“react-app”Babel 预设时,Babel 阻止我使用浏览器原生 ES6 功能。 如何使用最新 Chrome 中可用的ES6 浏览器原生功能http://kangax.github.io/compat-table/es6/ 同时也使用ES6 模块系统,目前尚不支持 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import 并且在编写 React 组件时还继续使用 JSX 语法? 回答1 我找到的解决方案是执行以下操作。 创建一个 .babelrc 文件然后使用下面的设置 { "presets": ["react"], "plugins": ["transform-es2015-modules-umd"] } 预设反应设置加载处理 JSX 转译的模块 https://babeljs.io/docs/plugins/preset-react/ transfrom es2015 modules umd 设置处理模块系统。 https://babeljs.io/docs/plugins/transform-es2015-modules-umd/

2022-04-28 17:20:31    分类:技术分享    reactjs   ecmascript-6   babeljs   react-jsx   es6-modules