天道酬勤,学无止境

reactjs

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

Using props in React style attribute

(I am using JSX with ES6 syntax) This works: render() { return ( <div style={{ width: '95%' }}></div> ) } This doesn't work: (why not?) Edit: It actually does work render() { return ( <div style={{ width: this.props.progress + '%' }}></div> ) } Edit: It works but the style value has to be a valid value else it will return the error. I use the state to create the style object and clean out the property with a regular expression in the constructor, so it will not be error-ing again because of invalid values. Here is my solution: import React, { Component, PropTypes } from 'react' export default

2022-06-07 18:55:05    分类:问答    reactjs

Toggle class on menu items with ReactJS

问题 我有一个 React-Redux 应用程序,并且我创建了一个“侧边栏”组件,我想在其中切换每个菜单项的“活动”类 onClick。 我拥有的当前代码在所有菜单项上切换“活动”类。 这是我的代码: import React, {Component} from 'react' import {connect} from 'react-redux' export default class Sidebar extends Component { constructor(props) { super(props) this.toggleClass= this.toggleClass.bind(this); this.state = { activeIndex: false } } toggleClass(e) { const currentState = this.state.activeIndex; this.setState({ activeIndex: !currentState }); }; render(){ return( <div id="sidebar"> <div className="nav"> <ul className="dashboard-menu"> {this.renderSidebarMenuItems} <li className={this

2022-05-17 05:27:18    分类:技术分享    reactjs

dynamic variable on setState won't work for toggle

问题 我有这个功能 toggleDropdown = (name) => { this.setState({ [`open${name}`]: !this.state[`${name}`] }) } 我在多个不同的下拉列表中使用它 <div onClick={e=> toggleDropdown('Dropdown1')}</div> <div onClick={e=> toggleDropdown('Dropdown2')}</div> 当我单击 div 时,不知何故this.state.Dropdown1或this.state.Dropdown2始终为真,它不会切换,有什么问题? 回答1 两件事情, 当您根据前一个设置状态时,请使用setState的prevState回调机制,因为setState是asynchronous的。 你想得到this.state.Dropdown1并且你仍然设置openDropdown1 尝试 toggleDropdown = (name) => { this.setState((prevState) => ({ [name]: !prevState[name] })) }

2022-05-17 04:45:08    分类:技术分享    javascript   reactjs   ecmascript-6

Material UI Select Field multiselect

问题 我尝试了几次文档中给出的示例。 但这对我来说效果不佳。 任何人都可以帮助我....这是代码 import React, {Component} from 'react'; import SelectField from 'material-ui/SelectField'; import MenuItem from 'material-ui/MenuItem'; const names = [ 'Oliver Hansen', 'Van Henry', 'April Tucker', 'Ralph Hubbard', 'Omar Alexander', 'Carlos Abbott', 'Miriam Wagner', 'Bradley Wilkerson', 'Virginia Andrews', 'Kelly Snyder', ]; /** * `SelectField` can handle multiple selections. It is enabled with the `multiple` property. */ export default class SelectFieldExampleMultiSelect extends Component { state = { values: [], }; handleChange = (event, index

2022-05-17 04:07:12    分类:技术分享    reactjs   material-ui

How can I change value of prop in react?

问题 props的值怎么改,怎么setProps,假设this.props.contact.name的值为John,我想改成Johnny。 我怎样才能做到这一点? 例如: changeValue(){ this.props.contact.name='Johnny' } 回答1 我建议而不是更改道具值,您可以将函数传递给道具,然后更改父组件状态,这样它就会更改子组件道具,例如 你的父组件应该是 class SendData extends React.Component{ constructor(props) { super(props); this.state = { images: [ 'http://via.placeholder.com/350x150', 'http://via.placeholder.com/350x151' ], currentImage: 0 }; this.fadeImage=this.fadeImage.bind(this); } fadeImage(e) { e.preventDefault(); this.setState({currentImage: (this.state.currentImage + 1) % this.state.images.length}) } render() { return( <FadeImage

2022-05-17 04:07:07    分类:技术分享    reactjs

Nginx, React, Node & Let's Encrypt... How to point Nginx at my React app

问题 我有一个 React 应用程序,我需要与运行在端口 5000(通过 pm2)上的节点服务器通信,并成为我网站的根目录。 Node 服务器从 API 中获取一些数据并将其返回给客户端。 现在我让 Nginx 指向 5000 端口(我按照教程来测试这一点)。 假设我的 React 应用程序位于 /www/ReactApp/dist/,我如何将 Nginx 指向该位置而不是端口 5000 上的节点服务器? 基本上,我需要的只是 /www/ReactApp/dist/ 的内容,当您访问 myapp.com 但使用现有的 SSL 证书时提供服务。 Node server.js 将在后台运行,我的 React 应用程序将调用它来获取数据。 这是我的 /etc/nginx/sites-enabled/default 的内容: # HTTP — redirect all traffic to HTTPS server { listen 80; listen [::]:80 default_server ipv6only=on; return 301 https://$host$request_uri; } # HTTPS — proxy all requests to the Node app server { # Enable HTTP/2 listen 443 ssl http2

2022-05-17 03:30:35    分类:技术分享    javascript   node.js   reactjs   ssl   nginx

react-native run-android on Android < 5

问题 我正在尝试在具有 Android V4.1.1 的模拟器上运行 Android 应用程序,该应用程序在 Android 版本 > 5 中运行正常,但是当我尝试在 Android V4.X 上运行该应用程序时,终端给了我下一个错误: Running adb -s xxx.xxx.xx.xxx:5555 reverse tcp:8081 tcp:8081 error: closed Could not run adb reverse: Command failed: adb -s xxx.xxx.xx.xxx:5555 reverse tcp:8081 tcp:8081 显示该错误后,应用程序显示: Unfortunately, APP_NAME has stopped. 我有最新版本的 Android SDK 和工具。 回答1

2022-05-17 03:13:07    分类:技术分享    android   reactjs   react-native

react route using browserhistory changes url but nothing happens

问题 我正在尝试让反应路由器工作。 这是我的代码: var hashHistory = require('react-router-dom').hashHistory; var BrowserRouter = require('react-router-dom').BrowserRouter; var Route = require('react-router-dom').Route; var ReactDOM = require('react-dom'); var React = require('react'); var Index = require('./index'); var Login = require('./login'); ReactDOM.render( <BrowserRouter history={hashHistory}> <div> <Route path="/" component={Index} /> <Route path="/login" component={Login} /> </div> </BrowserRouter>, document.getElementById('main-content') ); 然后在我的 index.js 中我这样做: <div className="navbar-nav" onClick={() =>

2022-05-17 02:58:43    分类:技术分享    javascript   reactjs   react-router

Anchor tag isn't calling the onClick function in React

问题 当您单击渲染方法中的锚标记时,我正在尝试更新我的组件状态。 我已经尝试在构造函数中进行绑定,但仍然没有调用 console.log。 下面是我的代码。 请帮忙。 这阻碍了我的进步,哈哈。 这是根据我之前关于 stackoverflow 的问题修改的代码。 const React = require('react'); class Navbar extends React.Component { constructor(...props) { super(...props); this.setActiveTab = this.setActiveTab.bind(this) this.state = { currentPage: "/" } } setActiveTab(e) { console.log(e.target) this.setState({ currentPage: e.target.href }) } render() { const { path } = this.props let classString = path === this.state.currentPage ? 'nav-item is-tab is-active' : 'nav-item is-tab' return ( <nav className="nav"> <div className

2022-05-17 02:52:32    分类:技术分享    javascript   node.js   reactjs   express