Articles of react jsx

渲染方法中意外的标记参数

我试图启动Express.js服务器与我下载的反应的应用程序,但是当我做npm开始在我的服务器上有错误 ERROR in ./src/app.jsx Module build failed: SyntaxError: Unexpected token (6:7) 4 | import 'react-select/dist/react-select.css'; 5 | > 6 | render(<div>Place your application here</div>, document.getElementById('app-root')); 为什么会这样?

React + Gulp + Babelify

我正尝试将我的工作应用程序从React和Gulp与ES5转换为React + Gulp和ES6。 我只是试图用babelifyreplace反应,但我仍然得到吞咽错误:非法import声明 这是我的gulpfile.js: "use strict"; var gulp = require('gulp'); var connect = require('gulp-connect'); //Runs a local dev server var open = require('gulp-open'); //Open a URL in a web browser var browserify = require('browserify'); // Bundles JS var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp var concat = require('gulp-concat'); //Concatenates files […]

反应链接到function不起作用

对不起,如果这是一个重复的问题。 我似乎无法解决这个问题或find答案。 我有一个基本的React路由器设置,我正在努力工作,我真的被困在让链接function工作。 提前致谢。 线框示例 这是代码。 App.js import React from 'react' import reactDOM from 'react-dom' import { Router, Route, hashHistory, IndexRoute } from 'react-router' import About from "./About Us/About" import FrontPage from "./Front Page/FrontPage" import HeaderNavigation from './General/HeaderNavigation'; reactDOM.render(( <Router history = {hashHistory}> <Route path="/" component={FrontPage}> <IndexRoute component = {HeaderNavigation}/> <Route path="/About" component={About}/> </Route> </Router> […]

react-typeahead – 不变的违规:addComponentAsRefTo(…)问题

节点v0.12.2 React v0.13.2 Npm v2.7.4 使用标准typeaheadinput会导致以下错误: 未捕获错误:不变违例:addComponentAsRefTo(…):只有ReactOwner可以有参考。 这通常意味着你正在尝试向没有所有者的组件添加ref(也就是说,不是在另一个组件的render方法中创build的)。 试着将这个组件放在一个新的顶层组件中,这个组件将会容纳参考。 这就是我如何实现这一点… Index.jsx有: 'use strict' var React = require('react'); var ReactTypeahead = require('react-typeahead').Typeahead var QuickSearch = React.createClass({ render: function () { return( <ReactTypeahead options={["spam", "foodbar"]}/> ); } }); var Topbar = React.createClass({ render: function() { return ( <QuickSearch /> ); } }); module.exports = Topbar; 然后在我的App.jsx中我有: 'use […]

React – 服务器端组件呈现

我试图renderToString一个非常简单的React组件在服务器上: /** @jsx dom */ var React = require("react"); var Title = React.createClass({ render: function(){ return(<h1>Hello World</h1>) } }); module.exports = React.createFactory(Title); 当我调用ReactDOMServer.renderToString(组件)时,我得到Error: Invariant Violation: renderToString(): You must pass a valid ReactElement. 如果我做React.createElement(标题),我得到 return(dom.h1(null, "Hello World")) ^ ReferenceError: dom is not defined 路线文件: var express = require('express'), router = express.Router(), React = require("react") ReactDOMServer = […]

为React模板化引擎?

我正在构build我的第一个React应用程序,对于如何在Express中初始页面加载时传递数据,我有点困惑。 我通常使用EJS partials并通过res.render()传递数据对象。 有没有一种解决scheme,使我可以轻松地将值放入页面加载的React道具,类似于EJS的方式? 如果是这样,哪个是最好的select? 到目前为止,我刚刚从componentDidMount()发送了一个AJAX,这是我很好(我假设不理想,但它的工作),但我现在正在build立一个“文章”页面与一个variables的URL ID,我需要传入数据库查询,以便我可以接收关联的数据。

如何将上下文传递给React / jsx视图?

我是React新手,我正在努力弄清楚一些基础知识。 在其他模板引擎(如EJS或Jade)中,当您在路由/控制器文件中呈现视图文件时,您可以传入上下文variables。 但是,我还没有find任何方式与React / jsx做到这一点。 我应该注意到我正在使用Express。 我实际上是不确定的,如果jsx是一个视图引擎,或者如果React莫名其妙内置。无论如何,我不知道如何将上下文从服务器传递到视图文件。 例如,如果我想加载configuration文件信息(存储在服务器/后端),我怎样才能把它传递给我的前端jsx视图文件在React / jsx?

在React代码中导入superagent时出错

我有一个用JSX编写的NodeJS服务器代码,我在这里导入superagent: import request from 'superagent'; 当服务器启动后生成,我得到以下错误:TypeError:require不是一个函数。 这发生在我编译的代码中的以下行: var crypto = require('crypto'); 在回溯中,我意识到encryption是“强大”所要求的,这是“超级”所要求的。 我在客户端JavaScript代码中具有相同的superagent导入,但工作正常。 我将节点(服务器)和客户端的编译JS代码进行了比较,两者都是相同的。 所以它的构build方式似乎不是一个问题。 有没有人看过这个错误,你会知道需要做什么?

反应文件命名约定为jsx

我是新的反应。 最初我开始使用create-react-app 。 文件名默认是index.js 。 然后我将这个文件重命名为index.jsx 。 当我尝试使用npm start应用npm start我收到以下错误。 > react-scripts start Could not find a required file. Name: index.js Searched in: D:\WorkSpace\React\chat\src npm ERR! Windows_NT 6.1.7601 npm ERR! argv "D:\\Applns\\nodejs\\node.exe" "D:\\Applns\\nodejs\\node_modules\\ npm\\bin\\npm-cli.js" "start" npm ERR! node v6.10.0 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! chat@0.1.0 start: `react-scripts start` npm ERR! […]

React Router v4中的indexLink

菜鸟在这里。 在React Router v4中有没有新的方法来使用indexLink? 我正在更新一些版本3代码(我想我离开angular度避免所有这些弃用!) 我把它带入一些descructuring: var {NavLink, IndexLink} = require('react-router-dom'); 并使用IndexLink保持它始终不醒目: <h2>Nav</h2> <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>blah blah blah</IndexLink> //Other navlinks working fine IndexLink是打破我的代码的唯一的东西,这是从我改变它的错误。 “警告:React.createElement:type是无效的 – 期望一个string(对于内置组件)或一个类/函数(对于复合组件),但得到:undefined。你可能忘了从你定义的文件中导出你的组件检查Nav的渲染方法“。 一切都被导出,简单的应用程序完美工作,直到我添加IndexLink。 现在传递出去。