Articles of reactjs

反应路由器版本4不显示任何东西

我认为我在使用我的React路由器时出错了。 我是React / Redux的初学者,所以任何帮助真的很感激。 这也可能是我如何configurationwebpack,但我的前端是什么都没有显示,但我没有得到任何错误。 我不知道是什么问题,但我的服务器启动,能够填充模拟数据,和webpack编译,所以我认为后端工程。 我很抱歉的代码墙,但我真的不知道我要去哪里错了,我是一个巨大的新手设置这个。 这绝对是我写过的最长的文章,所以我感谢任何人看看它。 我的客户端/ src /路由: import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import HomePage from './components/home/HomePage'; import { Layout } from './components/Layout'; export const App = () => ( <Layout> <Switch> <Route exact path="/" component={HomePage} /> </Switch> </Layout> ); export default App; […]

如何在node.js中导入font-awesome以在r​​eact.js中使用?

我正在使用node.js和react.js。 我已经导入了我自己的CSS文件,如下所示: import React from 'react'; import Modal from 'react-modal'; import './../App.css'; 这工作正常,但是当我尝试像这样添加字体真棒: import './src/font-awesome-4.7.0/css/font-awesome.css' 那么它不起作用。 难道我做错了什么? 或者有另一种方法?

地图循环中的条件语句

在ReactJS中,我试图在地图循环中调用if语句。 一个示例代码是这样的: var items = ['abc', '123', 'doe', 'rae', 'me']; return ( <div> {items.map((item, index) => ( <span dangerouslySetInnerHTML={{ __html: item }}></span> {index % 2: <h1>Test Output/h1> } ))} </div> } 除了我一直得到他的错误: Module build failed: SyntaxError: Unexpected token, expected , (73:11) web_1 | web_1 | 71 | <span dangerouslySetInnerHTML={{ __html: item }}></span> web_1 | 72 […]

检测React Native中左侧的滑动

如何在React Native的整个屏幕上检测左滑动? 是否有必要使用PanResponder或可以做更简单?

req.session不存储数据

我试图实现一个login系统,用户可以注册到一个网站,然后用他的帐户login。 一旦用户login,他可以编辑他的个人信息。 要检查用户是否login,我试图将req.session.isLoggedIn设置为true ,然后检查该值是否为true以访问网站的某些区域。 问题是,刚刚login之后,我打印了req.session的值,并看到刚设置的值,但在此之后,当我尝试在另一个路由中检查req.session.isLoggedIn的值时,我得不到值。 这是我的代码: const express = require('express'); const app = express(); var { Client } = require('pg'); var bcrypt = require('bcrypt'); var bodyParser = require('body-parser'); var cookieParser = require('cookie-parser'); var cors = require('cors'); var path = require('path'); var session = require('express-session'); var url = require("url"); app.use(cors()); app.use(express.static(path.join(__dirname, 'client/build'))); app.use(cookieParser()); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: […]

不能读取节点中的读取后

我将数据{id: "abc123", text: "sometext"}到节点API。 从action调用的组件发布: export function addTextToAPI(inputData) { return(dispatch) => { console.log(inputData), dispatch(addText(inputData)) fetch(myapi, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: 'POST', data: inputData }) .then(res => res.json()) } } console.log(inputData)是{id: "abc123", text: "sometext"} 节点: var express = require('express'); var bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.json()); app.post('/addtest', (req, res) => […]

如何从Reactjs项目中执行系统脚本?

我有一个React项目,当用户点击一个button时,我想执行一个服务器端bash脚本。 然后该脚本将运行并返回一些输出以显示回用户。 我知道NodeJS有一种方法来产生或执行一个特定的命令,但我不知道如何利用我的React项目中的这些function。 有谁知道如何做到这一点?

在创build对象时,数组键不会被内插

我将JSON转换为数组并返回到单独的JSON对象(它与React和子对象有关)。 下面的数组工作正常,因为把数组元素放入variables中。 但是,当我试图从他们的obj,关键不起作用,它只是作为“myKey” – 为什么? 将数组元素转换为对象的正确方法是什么? var express = require('express'); var app = express(); var bodyParser = require('body-parser'); var methodOverride = require('method-override'); var fetch = require('isomorphic-fetch'); app.use(bodyParser.json()); app.use(methodOverride()); var promise = new Promise(function(resolve, reject) { fetch('https://jsonplaceholder.typicode.com/posts/1').then( function(response){ return response.json(); } ).then(function(jsonData){ result = [] for(var i in jsonData) { result.push([i, jsonData [i]]); } var myKey […]

反应应用程序的状态是不是最新的,我在我的数据库中?

我正在制作一个小杂货清单应用程序。 每当我提交一个表单,我执行一个axios请求将项目添加到数据库,并更新我的“项目”状态,以包含新的杂货项目。 问题是,除非我刷新页面,我的状态仍然显示一个空的“项目”数组。 “items”数组的初始状态是从数据库中提取出来的,通过使用componentDidMount并在那里设置“items”的状态。 另外,在我的状态,我有当前的用户也从数据库中拉出。 如果在添加我的第一个项目之后尝试loginthis.state.currentUser.shoppingList,它将显示一个空数组,即使我可以看到服务器端日志,指出该数组不是空的。 这是我的代码: **App Component** import React from 'react'; import ListForm from './ListForm'; import * as helpers from '../helpers'; class App extends React.Component{ state = { currentUser: {}, items: [] } componentDidMount() { console.log('Hello!'); helpers.fetchUser() .then(data => { this.setState({ currentUser: data, items: data.shoppingList }, () => { console.log(this.state) }); }); } […]

自动脚本转换js到jsx在反应的应用程序

我是REACT的新手,所以如果我混淆了术语,请耐心等待。 下面的html文件启动一个反应的应用程序: 的index.html <html> <head> <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script> <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script> <script data-require="redux@*" data-semver="3.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.2.1/redux.js"></script> <script data-require="react-redux@*" data-semver="4.4.5" src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script> <title>Hello world</title> </head> <body> <h1>Share a sport activity</h1> <div id="appMount"></div> <script src="app.js"></script> </body> </html> 在服务器上的index.html文件夹中,有一个app.jsx文件,但没有app.js文件(参见脚本标签的src属性)。 app.jsx class Communicator extends React.Component { constructor(props) { super(props); this.state = {message: this.props.message}; } resetComm() { this.setState({message: ''}); } […]