Questions tagged «reactjs»

Django的新手，甚至是ReactJS的新手。我一直在研究AngularJS和ReactJS，但是决定使用ReactJS。尽管AngularJS拥有更多的市场份额，但它似乎正在逐步超越AngularJS的知名度，并且据说ReactJS更快地被接受。 撇开所有垃圾，我开始学习Udemy的课程，看完几段视频后，了解它与Django的集成程度似乎很重要。那就是当我不可避免地碰壁只是要启动并运行时，那里准备了什么样的文档，以使我几个小时和几个晚上都不会转动轮子。 pip我遇到的确没有任何全面的教程或软件包。例如，我碰到的几个没有用或已过时pyreact。 我曾以为只将ReactJS完全分开，但要考虑要让ReactJS组件呈现的类和ID。将单独的ReactJS组件编译成单个ES5文件后，只需将该单个文件导入Django模板。 我认为当我从Django模型进行渲染时，这会很快崩溃，尽管Django Rest Framework听起来似乎很复杂。甚至还不足以了解Redux如何影响所有这一切。 无论如何，有人有明确的方式使用他们愿意共享的Django和ReactJS吗？ 无论如何，文档和教程对于AngularJS和Django来说是很多的，因此很容易采取这种方法来开始使用任何前端框架……这不是最好的原因。

138 django  reactjs 

我正在使用react-router进行反应。我正在尝试在react-router的“链接”中传递属性 var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link> <RouteHandler/> </div> ); } }); …

137 javascript  reactjs  react-router 

我最近从Angular转到了ReactJs。我正在使用jQuery进行API调用。我有一个API，该API返回要打印在列表中的随机用户列表。 我不确定如何编写我的API调用。最佳做法是什么？ 我尝试了以下操作，但未得到任何输出。如果需要，我愿意实现替代API库。 下面是我的代码： import React from 'react'; export default class UserList extends React.Component { constructor(props) { super(props); this.state = { person: [] }; } UserList(){ return $.getJSON('https://randomuser.me/api/') .then(function(data) { return data.results; }); } render() { this.UserList().then(function(res){ this.state = {person: res}; }); return ( <div id="layout-content" className="layout-content-wrapper"> <div className="panel-list"> {this.state.person.map((item, …

137 javascript  jquery  reactjs 

我有一个非常简单的功能组件，如下所示： import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; 还有另一个组件： import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout = (props: LayoutProps) => ( <Aux> <div>Toolbar, SideDrawer, Backdrop</div> <main> …

137 reactjs  typescript  jsx  typescript2.0 

我的错误输出： 无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-configuration.module具有未知的属性“ loaders”。这些属性是有效的：对象{exprContextCritical？，exprContextRecursive？，exprContextRegExp？，exprContextRequest？，noParse ?、规则？，defaultRules？，unknownContextCritical？，unknownContextRecursive？，unknownContextRegExp？，unknownContextRequest？，unsafeCache？，wrappedContextCritical？，wrappedContextRecursive？，wrappedContextRegExpcursive？ ？，strictExportPresence？，strictThisContextOnImports？}->影响普通模块的选项（NormalModuleFactory）。 我的webpack.config.js： var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); var APP_DIR = path.resolve(__dirname, 'src/client/app'); var config = { entry: APP_DIR + '/index.jsx', module : { loaders : [ { test : /\.jsx?/, include : APP_DIR, loader : 'babel-loader' } ] …

136 reactjs  webpack 

TLDR：使用defaultChecked而不是已检查的工作jsbin。 尝试设置一个简单的复选框，该复选框将在选中时划掉其标签文本。由于某些原因，当我使用组件时，不会触发handleChange。谁能解释我在做什么错？ var CrossoutCheckbox = React.createClass({ getInitialState: function () { return { complete: (!!this.props.complete) || false }; }, handleChange: function(){ console.log('handleChange', this.refs.complete.checked); // Never gets logged this.setState({ complete: this.refs.complete.checked }); }, render: function(){ var labelStyle={ 'text-decoration': this.state.complete?'line-through':'' }; return ( <span> <label style={labelStyle}> <input type="checkbox" checked={this.state.complete} ref="complete" onChange={this.handleChange} /> {this.props.text} …

136 checkbox  onchange  reactjs 

如何从ReactJS组件中获取完整的URL？ 我想它应该是这样的this.props.location，但它是undefined

136 reactjs 

我在玩React和ES6使用babel和webpack。我想在不同的文件中构建多个组件，将其导入单个文件并将其与webpack 假设我有几个这样的组件： my-navbar.jsx import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> ... </Navbar> ); } } main-page.jsx import React from 'react'; import ReactDOM from 'react-dom'; import MyNavbar from './comp/my-navbar.jsx'; export class MyPage extends React.Component{ render(){ return( <MyNavbar /> …

135 reactjs  ecmascript-6  webpack 

我的React项目中的图片有问题。的确，我一直认为src属性的相对路径是建立在文件架构上的 这是我的文件架构： components file1.jsx file2.jsx file3.jsx container img js ... 但是我意识到路径是建立在URL上的。在我的组件之一（例如到file1.jsx中）中，我有以下内容： localhost/details/2 <img src="../img/myImage.png" /> -> works localhost/details/2/id <img src="../img/myImage.png" /> -> doesn't work, images are not displayed 如何解决这个问题？我希望在react-router处理的任何形式的路由中，所有图像都可以使用相同的路径显示。

135 javascript  reactjs  webpack 

react redux中的component和container有什么区别？

135 javascript  reactjs  redux 

我是reactjs的新手，我想在我的react应用程序中包含引导程序 我已经安装了引导程序 npm install bootstrap --save 现在，要在我的react应用程序中加载bootstrap css和js。 我正在使用webpack。 webpack.config.js var config = { entry: './src/index', output: { path: './', filename: 'index.js' }, devServer: { inline: true, port: 8080, historyApiFallback: true, contentBase:'./src' }, module: { loaders: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } …

135 twitter-bootstrap  reactjs  webpack 

我将一个React应用程序克隆到我的系统上并运行以下命令 npm install -g create-react-app npm install --save react react-dom 之后我跑了 npm start 但是它引发了上述错误，在我将其推送到github的其他系统上也可以正常工作。但是克隆Windows或Mac后，它在任何其他系统上均不起作用。

135 reactjs 

为什么在以下伪代码示例中，当Container更改foo.bar时，Child不会重新渲染？ Container { handleEvent() { this.props.foo.bar = 123 }, render() { return <Child bar={this.props.foo.bar} /> } Child { render() { return <div>{this.props.bar}</div> } } 即使forceUpdate()在修改Container中的值后调用，Child仍会显示旧值。

135 javascript  html  reactjs 

我有一个通知组件，并且有一个超时设置。超时后我打电话this.setState({isTimeout:true})。 我想做的是，如果已经超时，我什么都不渲染： render() { let finalClasses = "" + (this.state.classes || ""); if (isTimeout){ return (); // here has some syntax error } return (<div>{this.props.children}</div>); } 问题是：return（）; //这里有一些语法错误

135 reactjs 

我如何从ReadableStream对象中获取信息？ 我正在使用Fetch API，但从文档中看不出来。 正文以a形式返回ReadableStream，我只想访问此流中的一个属性。在浏览器开发工具的Response下，我似乎以JavaScript对象的形式将这些信息组织到了属性中。 fetch('http://192.168.5.6:2000/api/car', obj) .then((res) => { if(res.status == 200) { console.log("Success :" + res.statusText); //works just fine } else if(res.status == 400) { console.log(JSON.stringify(res.body.json()); //res.body is undefined. } return res.json(); })

135 javascript  node.js  reactjs  fetch