Articles of reactjs

ReactJS包括或导入自定义或外部JavaScript文件

我有一个关于ReactJS的非常基本的问题,以及初学者和中级之间的差异。 我已经在webflow中devise了我的Web应用程序UI,现在正在ReactJS中开发前端应用程序。 所以,现在我有两个名为mordenizr.js和webflow.js的JS文件,我必须将它们导入到我的ReactJS组件和页面JSX文件中。 我想知道如何将外部或自定义JavaScript文件导入到ReactJS中,并且它们处于普通/模糊/缩小的JS,而不是ES6格式。 PS:我已经使用create-react-app创build了项目,所以无法更改或查看webpack&babelconfiguration 谢谢。 问候, 罗希特

无法parsing模块“react / lib / ReactComponentTreeHook”

我正在尝试升级React Native,我正在运行以下内容: error: bundling: UnableToResolveError: Unable to resolve module `react/lib/ReactComponentTreeHook` from `/Users/anthony/dev/apptova-react/node_modules/react-native/Libraries/Performance/Systrace.js`: Module does not exist in the module map or in these directories: /Users/anthony/dev/apptova-react/node_modules/react-native/node_modules/react/lib , /Users/anthony/dev/apptova-react/node_modules/react/lib 我很困惑。 我无法在node_modulesfind任何名为ReactComponentTreeHook的库。 我已经尝试删除node_modules文件夹并重新安装,纳达。 我也清除守望者手表,并重置打包器caching。 编辑:我一直遇到问题,似乎源于反应原生地图,所以我所以我重新回到一个工作稳定版本,卸载react-native-maps,并运行react-native-git-upgrade(再次)。 现在我得到: error: bundling: UnableToResolveError: Unable to resolve module `react/lib/ReactDebugCurrentFrame` from `/Users/anthony/dev/apptova-react/node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js`: Module does not exist in the module map or in these directories: […]

Uncaught TypeError:无法读取未定义的属性“推”(React-Router-Dom)

我有一个带有旋转幻灯片的仪表板 ,每个都有一个相应的Bldgs选项卡。 Dashboard.js和Bldgs.js都是我的App.js孩子。 当用户点击Dashboard.js的特定幻灯片A时, Dashboard需要告知App.js以便App可以告诉Bldgs.js在路由到Bldgs时显示选项卡A 我相信我将正确的索引值从Dashboard传递给App ,然后传递给Bldgs 。 但是,我的App.js文件中正在抛出一个错误,指出: Uncaught TypeError: Cannot read property 'push' of undefined 在开始将我的handleClick()函数传递给我的Dashboard组件之前,我的代码工作正常。 Index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import injectTapEventPlugin from 'react-tap-event-plugin'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import { BrowserRouter as Router } from 'react-router-dom'; import { hashHistory } from 'react-router'; […]

React Native中的边栏菜单与react-navigation

我在React Native使用了react-navigation ,我想创build一个侧边栏菜单,打开它作为一个覆盖层,从左到右填充大约80-90%的宽度。 没有反应导航,这是可能的包如react-native-side-bar ,但我想知道是否可以得到与DrawerNavigator完全相同的function。 但似乎DrawerNavigator有菜单button。 是不是可以自己configuration覆盖? 编辑 解决scheme1 一种方法是使用 const MyStackNavigator = StackNavigator({ A: { screen: AScreen }, B: { screen: BScreen }, C: { screen: CScreen } }); const RootNavigator = DrawerNavigator({ A: { screen: MyStackNavigator }, }, { // set content of side bar contentComponent: (props) => <Sidebar /> }); 但是可以从AScreen , […]

反应/ Babelify新手; 如何解决“访问PropTypes”警告

我对React和Babelify都是新手。 我正在使用Node来编译一个Web应用程序。 现在我正在这样做: browserify({debug: true}) .transform( babelify.configure({ comments : false, presets : [ "react", "babili", ], }) ) .require('./app.js', {entry: true}) .plugin(collapse) .bundle() .on("error", function (err) { console.log("Error:", err.message); }) .pipe(fs.createWriteStream(destination)); 我的应用程序是一个非常琐碎的“你好,世界!” 关于这个复杂的概念: class Renderer { render () { ReactDOM.render( <div>Hello, World!</div> document.querySelector("#react-app") ); } } module.exports = Renderer; 我得到这个警告: Warning: Accessing PropTypes via the […]

反应路由器版本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: […]