小编Dmi*_*dov的帖子

在一个没有子项的React组件中,由于我在JSX条件中使用了一个数组,我得到了"unique key prop"错误:

数组中的每个子节点都应该具有唯一的"键"支柱.

触发错误的代码如下所示:

<dl>
  { item.sale ? 
    [<dt>Sale</dt>,<dd className="formatted">{item.sale}</dd>,<dt>SRP</dt>,<dd>{item.srp}</dd>] :
    [<dt>Price</dt>,<dd className="formatted">{item.srp}</dd>]
  }
</dl>

我理解为什么在渲染子组件时需要关键道具,但是当"数组中的子"是像这样的任意子元素集时,如何满足React/JSX？

我用React的test utils制作了单元测试代码.但是遇到了问题

我的环境是:

• Rails 4
• Jasmine 2.0.0
• 主干1.1.2

describe("cNotice", function () {
    it("lol", function () {
        console.log(Notice); // present
        console.log(<Notice message="show me the message" />); // return Constructor

        var instance = <Notice message="show me the message" />;
        var component = React.addons.TestUtils.renderIntoDocument(instance);
        expect(component.getDOMNode().childNodes[0].className).toBe('notice');
    });
});

错误信息是:

错误:不变违规:addComponentAsRefTo(...):只有ReactOwner可以有refs.这通常意味着您尝试将ref添加到没有所有者的组件(即,不是在另一个组件的render方法内创建).尝试在一个新的顶级组件中渲染此组件,该组件将保存ref.

UPDATE

这段代码没问题:

describe("cNotice", function () {
    var Notice = null;
    beforeEach(function () { Notice = React.createClass({...}); });

    it("lol", function () {
        var instance = <Notice message="show me the message" />;
        var component …

我正在使用vim有一个编辑器.JSX编译交换/临时文件.我怎么能避免这种情况？

命令行 :

jsx --extension js --watch src/ build/

我在stdout中看到的内容:

.helloworld.js.swp changed; rebuilding...
["helloworld"]
["helloworld"]
helloworld.js~ changed; rebuilding...
helloworld.js~ changed; rebuilding...
["helloworld"]
["helloworld"]

谢谢.:)

我正在尝试将现有的网络应用程序从淘汰赛转换为反应js.

应用程序建立了与服务器的websocket连接,并异步接收更新(可能有许多客户端可以影响彼此的状态,例如聊聊室).

我的问题是,如果我是渲染服务器端,那么如何将更改推送到每个客户端？我刚刚开始阅读服务器上的渲染,所以我可能会误解它是如何工作的,但我相信的方式:

客户端执行一个发送到服务器的动作,服务器用一个html片段响应,然后客户端将其替换为它的DOM

对于可以通过服务器或其他客户端更改状态的应用程序,我是否仍会被迫使用websockets/http轮询来显示这些更新？

服务器是否可以按下新片段呢？

我使用的是gulp用browserify和tsify在打字稿项目。以下是我的摘录gulpfile.js：

var browserified = function (filename, debug) {
  var b = browserify({
    entries: filename,
    debug: debug || false
  });
  b.plugin('tsify', {
    noImplicitAny: true,
    target: 'ES5'
  });
  b.transform('debowerify');
  return b.bundle();
};

gulp.task('rebuild', ['lint', 'less'], function() {
    var b = browserified ('./src/ts/main.ts', true);
    return buildSourceMaps (b);
});

到目前为止，该方法有效。我想扩展它，以便我可以require响应JSX文件。首先，我尝试了（从我的TypeScript文件之一开始）：

import Test = require ('../jsx/Test.jsx');

但是，这不起作用，因为tsify在寻找TypeScript文件时会抱怨../jsx/Test.jsx.ts。因此，我使用以下技巧：

declare var require: any;
var Test = require ('../jsx/Test.jsx');

如果Test.jsx是普通的JavaScript，则可以使用。如果Test.jsx包含TypeScript，它将失败，这是我期望的。到目前为止，如此清晰。 …

我正在编写一个jsx文件,并希望格式化表格中的数字显示.这是表的代码:

<tr>
  <td>
    {stringVar}
  </td>
  <td>
    {numberVar}
  </td>
</tr>

numberVar正在直接打印; 如何使用C风格的字符串格式显示该数字(我需要设置精度值,添加逗号和$字符)？

我有Yii2项目设置,我决定使用Facebook的JavaScript框架React.js,它提供了一种方便的方法来在JavaScript代码中声明HTML模板,称为JSX.

我的JavaScript看起来如下:

(function () {
    'use strict';

    MyBlock = React.createClass({
        getInitialState: function () {
            return {data: []};
        },
        componentDidMount: function () {
            $.ajax({
                url: '/api/',
                dataType: 'json',

                success: function (data) {
                    this.setState({ data: data });
                }.bind(this)
            });
        },

        render: function () {
            <div class="block">
                {this.props.variable}
            </div>
        }
    });

    React.render(
        <ProfileQuestion />,
        document.getElementById('profile_question_wrapper')
    );
}());

AssetBundle帮助我在我的视图中包含所需的库,所以我将来自CDN的React.JS和JSX文件添加到我的AssetBundle中:

class MyAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = …

我想在React的JSX文件中使用setState函数中的变量.

我将如何重构此代码:

var name = e.target.name;
if(name == "title"){
    this.setState({ title: e.target.value});
}
else if(name == "date"){
    this.setState({ date: e.target.value});
}
else if(name == "amount"){
    this.setState({ amount: e.target.value});
}

进入这样的事情(所以我不重复自己)？

var name = e.target.name;
this.setState({ name: e.target.value});

上面的语法只设置"name"的状态而不是"name"变量的值.

我正在尝试使用Babel调用浏览器内的JSX转换.

我正在使用以下内容在浏览器中加载AMD JS模块:

require(["nbextensions/ht"] function(ext){});

最终导入这个"ui"模块,它调用了一个函数来渲染JSX.然而,这似乎并没有触发Babel的浏览器内JSX变换器.甚至可以在RequireJS上下文中调用Babel的JSX Transformer吗？

var BOWER = '/nbextensions/ht/bower_components'
var COMPONENTS = '/nbextensions/ht/components'
var NODE_MODULES = '/nbextensions/ht/node_modules'

requirejs.config({
  paths: {
    es6: NODE_MODULES + "/requirejs-babel/es6",
    babel: NODE_MODULES + "/requirejs-babel/babel-5.8.22.min"
  }
})

define([
  BOWER + '/react/react.min.js',
  "es6!" + COMPONENTS + "/App.jsx"
],function(React, App){
  console.log("Loaded React v" + React.version)

  var ui = {}
  ui.render = function() {
    React.render(<App/>, document.getElementById("ht_main"))
  }

  return ui
})

我已经按照webpack上的主要教程进行了操作,并且我已经启动并运行了服务器.当我更改文件时,它会在保存时更新,一切都很好.然而,我然后介绍了React,这一切都出了问题.

首先,我在浏览器中收到此错误:

Unexpected token <
You may need an appropriate loader to handle this file type.

这指向我的entry.js文件中的第4行:

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.
        </div>
    );
  }
});
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

这是index.html

<html>
<head>
    <meta charset="utf-8">
</head>
<body>

    <div id ="content"></div>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

webpack.config.js:

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: …