小编Dmi*_*dov的帖子

我正在编写一个复杂的反应应用程序并使用Cortex作为我的中心模型.皮质的哲学是它包装你的数据和更改数据,从根调用完整的重新渲染.这非常有用,尤其是当您有非分层视图更改状态并影响另一个时.

我面临的问题是在重新渲染时保持状态/道具.例如,我有一个特定的层次结构,如下所示:

<Page>
  <EditorCard>
     <Editor/>
     <PublishButton/>
  </EditorCard>
</Page>

在EditorCard需要的JavaScript的情况下Editor,为了使更改Editor上单击PublishButton(我用的内外部库Editor,其公开的编辑方法).因此,Editoron 通过调用传递给它的函数ComponentDidMount将实例设置为propon EditorCard.

我的问题是,当我点击PublishButton我更改皮质对象的值,导致从根重新渲染,并为此松开道具Editor(因为组件已经安装ComponentDidMount不再被调用).

我处理这个问题的方法是缓存getDefaultProps.

在EditorCard我的默认道具里面是:

  getDefaultProps: function() {
    return {
      cachedData: {},
    }
  },

并将编辑器实例保存为 this.props.cachedData.editor = editorInstance

这可以在多次重新渲染中保存道具.

这是如何使用getDefaultProps缓存的？在通过多次重新渲染保存道具时,我打破了这个黑客的一些核心反应规则？如果是这样,你能建议一个更好的结构？

我正在尝试在Flux-React中设置最基本的应用程序.它的唯一目标是触发一个Action,它通过Dispatcher发送到已经向Dispatcher注册的Store.将商店记录payload到控制台.

除了Store之外的所有东西都运行良好,但是一旦它命中AppDispatcher.register,Flux就会抛出以下错误:

Uncaught TypeError: Cannot set property 'ID_1' of undefined

这是导致错误的文件的代码,但我已经把整个项目放在https://github.com/bengrunfeld/react-flux-dispatcher-error,你可以在src/js中找到有问题的文件/stores/AppStores.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var AppConstants = require('../constants/AppConstants');
var assign = require('object-assign');


var CHANGE_EVENT = 'change';

var AppStore = assign({}, EventEmitter.prototype, {
  emitChange: function() {
    this.emit(CHANGE_EVENT);
  }
});

AppDispatcher.register(function(payload){
  console.log(payload);
  return true;
})

module.exports = AppStore;

我正在玩带有babel和webpack的React(@ 13.3).

我有一个像这样定义的组件:

import BaseComponent from './BaseComponent';

export default class SomeComponent extends BaseComponent {
    render() {
        return (
            <div>
                    <img src="http://placekitten.com/g/900/600"/>
            </div>
        );
    }
}

但是我收到以下错误:

未捕获的ReferenceError:未定义React

我理解错误:JSX位被编译到React.createElement(...)但React不在当前范围内,因为它没有导入.

我的问题是:解决这个问题的干净方法是什么？我是否必须以某种方式React通过webpack在全球范围内展示？

解决方案:

我跟着@ salehen-rahman的建议.

在我的webpack.config.js中:

module: {
    loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'react-hot!babel?plugins[]=react-require'
    }, {
        test: /\.css$/,
        loader: 'style!css!autoprefixer?browsers=last 2 versions'
    }]
},

我还需要修复我的测试,所以我将其添加到文件helper.js:

require('babel-core/register')({
    ignore: /node_modules/,
    plugins: ['react-require'],
    extensions: ['.js']
});

然后使用以下命令启动我的测试:

mocha --require ./test/helper.js 'test/**/*.js'

我有以下React组件:

class Form extends React.Component {
  handleSubmit(e) {
    e.preventDefault();

    let loginInput = ReactDOM.findDOMNode(this.refs.login);

    // change Main component's state
    this.props.addCard(loginInput.value);

    // reset the form
    loginInput.value = '';
  }

  render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <input placeholder="githug login" ref="login" />
        <button>Add Login</button>
      </form>
    );
  }
}

如您所见,我希望在handleSubmit提交表单时调用该函数.我通过将函数添加到onSubmit处理程序来表明这一点.

该函数正在正确的时间调用.但是,该this函数的值是null.这对我来说是令人惊讶的,因为我预计它的价值this是React Component.thisnull 的事实对我来说是令人惊讶的,因为我正在使用官方React文档建议的非常相似的逻辑/代码.

我很感激帮助找出为什么this不是React组件,如预期的那样,以及如何修复代码.

我想在JSX中为for循环创建HTML.这是我的尝试看起来像

    function renderTemplates(templates){
           var html = [];
           var templateDiv = [];
           var count  = 0;
           for(var identifier in templates){  
             if(templates.hasOwnProperty(identifier)){
               var templateDetails = templates[identifier];
               if(count == 0){
                  html.push(<Row>);
               }
               cols = <Col md={6}>ff
                          </Col>;
               html.push(cols);
               if(count == 0){
                      html.push(</Row>);
               }
               count = (count === 1)?0:1;
             }
        } 
        return html;
     }

我知道这是错误的语法,但无法弄清楚如何做到这一点.基本上我有一些数据,并希望创建时尚的html,2 divs在1行中.

当描述为空时我不想呈现标题

var description = <MyElement />; // render will return nothing in render in some cases

if (!description) { // this will not work because its an object (reactelement)
    return null;
}

<div>
     {title}
     {description}
</div>

什么是正确的方式而不是!描述检查它是否为空？

我想在我的Rails 4应用程序中使用material-ui组件库.我目前正在使用react-rails gem将.jsx编译添加到资产管道.我在gemfile中通过rails-assets添加了material-ui,如下所示:

source 'https://rails-assets.org' do
  gem 'rails-assets-material-ui'
end

我在我的application.js文件中需要这样的库:

//= require material-ui

但是我不断收到错误"找不到文件'材料-ui".如何使用react-rails gem在我的Rails应用程序中使用material-ui组件库？

我想处理我的jsx代码,所以我写这样的webpakc.config.js:

{
    test: /\.js$/,
    loaders: ['react-hot', 'babel-loader?presets[]=es2015'],
    exclude: /node_modules/
}

但它没有处理我的jsx代码并抛出这样的错误: 错误扔在终端

通过谷歌,我发现我需要添加presets['react']到我的配置文件.所以我像这样更新配置:

{
    test: /\.js$/,
    loaders: ['react-hot', 'babel'],
    query: {
        presets: ['react', 'es2015']
    },
    exclude: /node_modules/
}

但它引发了另一个错误: 更新配置文件后抛出一个新错误

我是webpack的新手,我该怎么办？

我正在学习react-router,然后尝试在示例应用程序中实现它.

这是我的代码:

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Sample APP</title>
        <link rel="stylesheet" href="dist/css/style.css">
    </head>

    <body>
        <div id="main"></div>
    </body>

    <script src="dist/js/main.js"></script>
</html>

/src/app.jsx

var React = require('react');
var ReactDOM = require('react-dom');

var Routes = require('./routes');

ReactDOM.render(Routes, document.getElementById('main'));

/src/routes.jsx

var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;

var HelloWorld = require('./components/hello-world');
var NotFound = require('./components/not-found');
var About = require('./components/about');

module.exports = (
    <Router>
        <Route path="/" component={HelloWorld}>
            <Route path="about" component={About}/>
        </Route>
    </Router>
);

/src/components/hello-world.jsx

var React …

编译脚本时

/// <reference path="./typings/react/react.d.ts" />
import React = __React;

var content = <div>Hello, world!</div>;

React.render(content, document.getElementById('output'));

我收到一个错误

$ tsc --jsx react app.tsx app.tsx(6,7): error TS2339: Property 'render' does not exist on type 'typeof __React'.

有没有办法解决它？谢谢