Tag: reactjs

使用reactjs和requirejs: 最近，我开始使用reactjs和backbonejs路由器来构build一个应用程序。我通常使用requirejs进行依赖和代码pipe理。但是，当我尝试包含包含jsx语法的文件时，会出现问题。这是我到目前为止我的router.js ： define(["backbone", "react"], function(Backbone, React) { var IndexComponent = React.createClass({ render : function() { return ( <div> Some Stuff goes here </div> ); } }); return Backbone.Router.extend({ routes : { "": "index" }, index : function() { React.renderComponent(<IndexComponent />, document.getElementById('index')); } }); }); 我如何把IndexComponent放在它自己的文件中，并在这个文件中调用它？我已经尝试了通常的方法（与我已经使用的骨干和反应一样），但由于jsx语法而出现错误。

如何使用webpack文件加载器加载图像文件: 我正在使用webpack来pipe理reactjs项目。我想通过webpack文件加载器在JavaScript中加载图像。下面是webpack.config.js： const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.join(__dirname, './dist') }; module.exports = { entry: { jsx: './app/index.jsx', }, output: { path: PATHS.build, filename: 'app.bundle.js', }, watch: true, devtool: 'eval-source-map', relativeUrls: true, resolve: { extensions: ['', '.js', […]

dynamic呈现React组件: 在React JSX中，似乎不可能做这样的事情： render: function() { return ( <{this.props.component.slug} className='text'> {this.props.component.value} </{this.props.component.slug}> ); } 我得到一个parsing错误：意外的标记{。这不是React可以处理的吗？我正在devise这个组件，以便在这个引擎下，存储在this.props.component.slug中的值将包含有效的HTML元素（h1，p等）。有什么办法可以做这个工作吗？

es6模块的实现，如何加载一个json文件: 我正在从https://github.com/moroshko/react-autosuggest实施一个例子重要的代码是这样的： import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) – suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of strings, eg: // ['Mentone', 'Mill Park', 'Mordialloc'] setTimeout(() => callback(null, suggestions), 300); […]

React-Router：IndexRoute的目的是什么？: 我不明白使用IndexRoute和IndexLink的目的是什么。在任何情况下，下面的代码似乎都会首先selectHome组件，除非Aboutpath被激活。 <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> VS <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> 第一种情况的优点/目的是什么？

如何在读取数据时在React Redux应用程序中显示加载指示器？: 我是React / Redux的新手。我在Redux应用程序中使用获取api中间件来处理API。它是https://github.com/agraboso/redux-api-middleware 。我认为这是处理asynchronousAPI行为的好方法。但是我发现了一些自己无法解决的情况。正如主页https://github.com/agraboso/redux-api-middleware#lifecycle所言，抓取API生命周期从调度CALL_API动作开始，然后调度FSA动作。所以我的第一个例子是在读取API时显示/隐藏预加载器。中间件将在开始时调度FSA操作，并在最后调度FSA操作。这两个动作都是由reducer接收的，只应该做一些正常的数据处理。没有UI操作，没有更多的操作。也许我应该保存在状态的处理状态，然后在商店更新时呈现它们。但如何做到这一点？一个反应组件在整个页面上stream动？从其他操作更新商店会发生什么情况？我的意思是说他们比国家更像事件！即使是更糟糕的情况，当我必须使用redux / react应用程序中的本机确认对话框或警报对话框时，我该怎么办？他们应该放在哪里，行动还是减less？最好的祝愿！希望回复。

将SVGembedded到ReactJS中: 是否可以将SVG标记embeddedReactJS组件？ render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln … </span> ); } 结果在错误中：名称空间属性不受支持。 ReactJSX不是XML。这样做的最轻的方法是什么？使用像React ART这样的东西对于我正在尝试做的事来说是过度的。

如何使用连接w / Redux从this.props获得简单的调度？: 我有一个简单的React组件连接起来（映射一个简单的数组/状态）。为了避免引用商店的上下文，我想要一种方式直接从道具“派遣”。我见过其他人使用这种方法，但由于某种原因无法访问此:) 这里是我目前使用的每个npm依赖的版本 "react": "0.14.3", "react-redux": "^4.0.0", "react-router": "1.0.1", "redux": "^3.0.4", "redux-thunk": "^1.0.2" 这是组件连接方法 class Users extends React.Component { render() { const { people } = this.props; return ( <div> <div>{this.props.children}</div> <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button> </div> ); } }; function mapStateToProps(state) { return { people: state.people }; } […]

ReactJS与Django – 真正的用法: 我用React搞了一下，我非常喜欢。它比Angular更详细（ng-repeat with | filter是无价的），但是可以。这个东西，这是我的bug，是我应该如何使用React与Django模板。我应该把所有的JavaScript与“HTML”标记一起放入模板中。实现Angular是相当无缝的。我只是把一些属性到模板/ Django的表单类，然后写在一个单独的文件的JavaScript。包括该文件，并完成。如何“使用”反应？什么是正确的方式？提前致谢！

React JS onClick事件处理程序: 我有 var TestApp = React.createClass({ getComponent: function(){ console.log(this.props); }, render: function(){ return( <div> <ul> <li onClick={this.getComponent}>Component 1</li> </ul> </div> ); } }); React.renderComponent(<TestApp />, document.body); 我想为单击列表元素的背景着色。我如何在React中做到这一点？就像是 $('li').on('click', function(){ $(this).css({'background-color': '#ccc'}); });