Tag: reactjs

如何构buildreact-treebeard项目？

我是一个基于浏览器的networking程序员。 在过去的几年中，JavaScript开发的简单而直接的世界已经变成一场混乱。 对于一个微小的function，人们必须通过隐秘的命令和深奥的错误消息来安装一百万个正确版本的东西。 我想使用一个简单的小部件： https ： //github.com/alexcurtis/react-treebeard 我试图build立这个项目使用，但现在放弃了深深的挫折。 如果我不得不列出我尝试过的东西的数量，它将会填满卷。 有人能告诉我如何在Windows 10上构build这个项目吗？

React.semantic ui的Icones没有加载webpack中间件

我正在尝试使用React Semantic构build一个反应应用程序。 我正在使用webpack-dev-server，webpack-hot-middleware和webpack-dev-middleware来自动执行任务。 我通过npm安装了反应语义ui。 npm install –save semantic-ui-css semantic-ui-react 然而，webpack似乎不加载./node_modules/semantic-ui-css/themes/assets/fonts/图标，它不是html页面./node_modules/semantic-ui-css/themes/assets/fonts/ 。 在控制台中没有错误，它只是不显示图标。 如果我没有在反应应用程序中导入semantic-ui-css，并且包含在CDN中，它就可以正常工作。 App.js import React from 'react'; import 'semantic-ui-css/semantic.min.css'; import { Container, Icon } from 'semantic-ui-react'; class App extends React.Component{ render(){ return ( <Container fluid> <h1 id='test'>ReactJs</h1> <hr/> <Icon name='search' /> </Container> ) } } export default App; webpack.config.dev.js import path from 'path'; import […]

在React中使用父组件中的button提交表单

所以我必须在模态中实现一个表单，正如你所看到的，模态中的button不是表单中的button。 我创build了表单作为模式的一个子组件。 如何使用父组件中的button提交表单？ 我正在使用React Semantic-UI反应作为我的UI框架。 我想如果我可以隐藏表单中的button，并使用JavaScript触发它。 我想这可能是通过getElementById来实现的，但是有没有反应的方法呢？ 我现在的Modal看起来像这样： <Modal open={this.props.open} onClose={this.props.onClose} size="small" dimmer={"blurring"}> <Modal.Header> Edit Activity {this.props.name} </Modal.Header> <Modal.Content> <ActivityInfoForm/> </Modal.Content> <Modal.Actions> <Button negative onClick={this.props.onClose}> Cancel </Button> <Button positive content='Submit' onClick={this.makeActivityInfoUpdateHandler(this.props.activityId)} /> </Modal.Actions> </Modal> 我的表单代码如下所示： <Form> <Form.Group widths='equal'> <Form.Input label='Activity Name' placeholder='eg. CIS 422' /> <Form.Input label='Activity End Date' placeholder='Pick a Date' /> </Form.Group> <Form.Group […]

用React实现Spotify API

我很抱歉，如果这是一个真正的基本问题，但我是一个基本上缺乏对React应用程序如何工作的理解的初学者。 现在我正在创build一个使用Spotify API的应用程序，包括身份validation。 使用React，我希望能够获取组件中的数据。 但是，API不允许我从“服务器端”获取API。 我的问题是，如何区分/如何创build一个“服务器端”，我所做的是从apivalidation和检索数据？

反应代码不与webpack编译

我的代码不会编译出于某种原因。 奇怪的是，当我在浏览器解释器中使用时会起作用。 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> 反应代码： var Cookies = require('cookies'); var cookieParser = require('cookie-parser'); var name = document.getElementById('name').innerHTML; //var name = req.user.name; var start = false; var Assets = React.createClass({ getInitialState: function(){ return({ assets: [], secondsElapsed: 0 }); }, tick: function() { //this.setState({secondsElapsed: this.state.secondsElapsed + 1}); if(start === true){ console.log(name); var myHeaders […]

PouchDB基本身份validation不适用于同步网关

当我尝试使用同步网关从PouchDB同步到couchbase服务器时，出现以下错误： XMLHttpRequest无法加载http：// localhost：4984 / test / 。 请求标头字段预检响应中的Access-Control-Allow-Headers不允许授权。 我试图设置头，即使这样我不能摆脱这个错误。 这是我的同步网关configuration文件 sync-gateway-config.json:: { "log":["*"], "databases": { "buildercycle": { "server":"http://localhost:8091", "bucket": "default", "users": { "GUEST": { "disabled": false, "admin_channels": ["*"] } }, "sync":`function(doc, oldDoc) { if (doc.type == "sports"){ channel(doc.type); access(doc.owner,doc.type); } else { channel(doc.type); access(doc.owner,doc.type); } }` } }, "CORS": { "Origin": ["http://localhost:8000","http://localhost:8083", "http://localhost:4985"], "LoginOrigin": ["http://localhost:8000","http://localhost:8083","http://localhost:4985"], […]

无法读取反应数据表错误中未定义的属性“映射”

在地图function中得到错误。 generateRows: function() { var cols = this.props.cols, // [{key, label}] data = this.props.data; 获取数据错误（未定义值获取） return data.map(function(item) { // handle the column data within each row var cells = cols.map(function(colData) { // colData.key might be "firstName" return <td> {item[colData.key]} </td>; }); return <tr key={item.BlogId}> {cells} </tr>; }); },

如何确保在身份validation背后的组件/path反应？

你好，我正在尝试做一个特定的path“/主”只能login用户访问。 我有一个loginUser操作发送login请求，然后redirect到“/主”。 但是，如果您只需在没有login的localhost：3000之后键入“/ main”，仍然可以进入“/ main”。 任何帮助赞赏。 这是我的行动： export function loginUser(username1, password1) { const mainPage = (response, dispatch) => { if(true) { history.push('/main'); } dispatch({ type: POST_DATA_SUCCESS, response, }); }; const promise = fetch('http://localhost:8080/users/login', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Basic ' + btoa(username1 + ":" + password1), }, body: JSON.stringify({ username: […]

如何从全局安装的节点应用程序中获取本地文件夹中没有node_modules的响应组件？

所以我得到了一个需要全局安装的软件包，它接受用户定义的反应组件并呈现它们。 我使用babel-register并定义： require('babel-register')({ presets: [ 'es2015', 'stage-0', 'react', ], }); 我的package.json文件如下所示： "dependencies": { "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babel-register": "^6.24.1", "babel-runtime": "^6.23.0", "chokidar": "^1.7.0", "del": "^2.2.2", "marked": "^0.3.6", "react": "^15.5.4", "react-dom": "^15.5.4", "window-size": "^1.0.0", "yamljs": "^0.2.10" }, 现在，因为这些用户定义的反应组件有时住在没有安装.babelrc地方或者任何包中，所以我真的希望使用那些与包依赖关系一起全局安装的组件。 我试图避免在全球安装我的软件包时必须安装这些依赖项。 虽然不知道如何。 我检查了node_module文件夹，并安装了所有的依赖关系： . […] ├── babel-code-frame ├── babel-core ├── babel-generator ├── babel-helper-bindify-decorators ├── babel-helper-builder-binary-assignment-operator-visitor ├── […]

react-router部署非静态

将基于react-router的webapp部署到在node.js服务器下运行的生产可以吗？ 除非首先加载index.html ，否则部署静态文件将阻止像server.com/about这样的链接工作。 人们可以通过使用HashRouter来解决这个问题，但是在这HashRouter看起来很老派。 index.js import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import App from './js/App'; import About from './js/About'; import registerServiceWorker from './registerServiceWorker'; import './index.css'; import { BrowserRouter as Router, Route } from 'react-router-dom'; ReactDOM.render( <Router> <App> <Route path='/about' component={About} /> </App> </Router> , document.getElementById('root')); registerServiceWorker();