相关疑难解决方法(0)

将本地文件中的json数据加载到React JS中

我有一个React组件,我想从文件中加载我的JSON数据.控制台日志当前不起作用,即使我将变量数据创建为全局变量

'use strict';

var React = require('react/addons');

// load in JSON data from file
var data;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "data.json", true);
oReq.send();

function reqListener(e) {
    data = JSON.parse(this.responseText);
}
console.log(data);

var List = React.createClass({
  getInitialState: function() {
    return {data: this.props.data};    
  },
  render: function() {
    var listItems = this.state.data.map(function(item) {
        var eachItem = item.works.work;        

        var photo = eachItem.map(function(url) {
            return (
                <td>{url.urls}</td> 
            )
        });
    });
    return <ul>{listItems}</ul>
  }
});

var redBubble = React.createClass({ …
Run Code Online (Sandbox Code Playgroud)

javascript ajax json xmlhttprequest reactjs

60
推荐指数
6
解决办法
16万
查看次数

Webpack - 包括配置文件作为外部资源

随着应用程序的增长,是时候从代码中删除硬编码的东西了.是时候实现正确的配置文件了.

我想使用webpack,并包含配置文件,所以我可以在react.js应用程序中要求它.

这就是我所做的(webpack.config):

var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
  './src/app.js'
],
output: {
  path: path.join(__dirname, 'public/js'),
  filename: 'app.built.js'
},
externals: {
  'Configurator':  require('./config/config-dev.json')
},
module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel?presets[]=es2015&presets[]=react' },
    { test: /\.css$/, loader: "style-loader!css-loader" }
  ]
}
 };
Run Code Online (Sandbox Code Playgroud)

我的JSON文件:

{
 "product": {
 "getProducts": "/product",
 "updateProduct": "/updateproduct",
 "deleteProduct": "/deleteproduct"
},
 "project": {
 "getProjects": "/project",
 "updateProduct": "/updateproject",
 "deleteProduct": "/deleteproject"    
}  
}
Run Code Online (Sandbox Code Playgroud)

在React组件的其中一个组件中,我尝试这样做:

var MyFile = require('Configurator');
Run Code Online (Sandbox Code Playgroud)

没有错误,webpack找到该文件.在控制台中我看到了这个:

var …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs webpack

11
推荐指数
1
解决办法
1万
查看次数

如何在React中使用配置文件?

假设我有5个jsx文件,每个文件都使用一些配置参数.我的index.js文件导入了所有这5个jsx文件.

我的jsx文件是否有办法从一个从配置文件中加载数据的全局JS对象获取数据,而不是让我的配置数据分布在5个文件中?

我已经看过一些例子,但是我无法让它们发挥作用.
JS6导入功能 | 使用webpack的示例

javascript reactjs webpack

9
推荐指数
1
解决办法
2万
查看次数

React + Webpack:在哪里配置REST端点

我有一个React + Flux应用程序并使用Webpack.我正在使用的REST API由不同的服务器提供服务,我试图找出我可以指定后端端点常量的位置,具体取决于我是在dev或prod环境中.

目前,对于dev,我已经将URL编码为localhost:port,但是当我部署时,它仍然尝试访问localhost上的端点.

它似乎应该是非常常见的东西,但找不到任何信息.

rest flux reactjs webpack reactjs-flux

2
推荐指数
1
解决办法
5335
查看次数

标签 统计

reactjs ×4

javascript ×3

webpack ×3

ajax ×1

flux ×1

json ×1

reactjs-flux ×1

rest ×1

xmlhttprequest ×1