标签: react-jsx

我有一个返回几行html的函数,如下所示:

render: function() {
  var badges = user.get('achievements').badges.map(function(badge) {
    var str = '<h3><span className="fa fa-fw '

    switch(badge.id) {
    case '0':
      str += ('fa-briefcase"></span><small>' + badge.text + '</small></h3>')
      break;
    case '1':
      str += ('fa-shopping-cart"></span><small>' + badge.text + '</small></h3>')
      break;
    ...
    }

    return str;
  });

  return (
    <div className="pull-right">
      {badges}
    </div>
  );
}

在执行此操作时,字符串将在页面上呈现为文本:

<h3><span className="fa fa-fw fa-briefcase"></span><small>Visionary</small></h3><h3><span className="fa fa-fw fa-shopping-cart"></span><small>Active</small></h3><h3><span className="fa fa-fw fa-sitemap"></span><small>Lorem</small></h3><h3><span className="fa fa-fw fa-tasks"></span><small>Ipsum</small></h3><h3><span className="fa fa-fw fa-signal"></span><small>Dolor</small></h3><h3><span className="fa fa-fw fa-check-square"></span><small>Amet;</small></h3>

如何将其呈现为正确的HTML？

我正在使用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"]

谢谢.:)

我有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 = …

我试图有条件地在元素集合上设置属性.

render: {
   var buttons = [];
   for (var i = 1; i <= this.props.totalWeeks; i++) {
      buttons.push(
         <button 
            onClick={ this.changeWeek.bind(this, i) } 
            disabled={ i === this.state.currWeek }>{ i }
         </button>);
   }
}

浏览器中的一切都很棒.但PHPStorm(版本8.0.3)将表达式标记{ i === this.state.currWeek }为错误属性值的错误.

我已经尝试用函数调用,变量等来改变它,但似乎无法使错误消失.我也尝试关闭PHPStorm上的检查规则,但找不到一个可以关闭它的设置.

题

如何在PHPStorm中消除该错误？如果这是一个错误,那么如何通过有条件地将HTML属性添加到一组元素中来解决这个问题呢？

我想卸载一个反应组件,它属于一个包含三个组件的父组件.父组件具有此渲染功能:

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      <Home ref="home"/>
      <Footer ref="footer"/>
    </div>
),

handleNavbarClick: function () {
  // remove Home
}

如果用户然后单击导航栏中的链接并且我想要卸载Home组件,我该怎么做？似乎我唯一的选择是做这样的事情(取自react.js:删除一个组件),但这似乎非常严重:

render: function () {
  var home = this.state.remove_home ? null : <Home ref="home />
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {home}
      <Footer ref="footer"/>
    </div>
),

handleNavbarClick: function () {
  this.setState({remove_home: true});
}

这是做适当的反应方式吗？

在本机反应中，我注意到未定义的变量不会产生错误。相反，执行只是悄悄地停止了未定义的变量。这使开发速度变慢。有什么办法可以得到更明确的错误？我'use strict;'位于文件的顶部，但这似乎无济于事

编辑：

失败示例：

      <Text style={{fontWeight: bold}}>Apply flow</Text>

在这种情况下，bold实际上应该是'bold'。我期待一个未定义的变量异常，但是我的应用程序只在此行静默失败。

我在Cordova项目中通过npm安装了font-awesome-webpack.我使用webpack创建一个bundle.js文件到我的/ www-folder.要使字体工作,我还必须将font-awesome-files构建到此文件夹.我的wepack.config.js:

module.exports = {
    devtool: 'source-map',
    entry: {
       app: ["./src/main.jsx"]
    },
    output: {
       path: path.resolve(__dirname, "dist/cwebphone/www"),
       publicPath: "http://localhost:8088/",
       filename: "bundle.js"
    },
    plugins: [
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NoErrorsPlugin()
    ],
    module: {
      loaders: [{
         test: /\.js?$/,
         loaders: ['react-hot', 'babel'],
         exclude: /node_modules/,
         include: __dirname
    },
    { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
    { test: /\.png$/, loader: "url-loader", query: { mimetype: "image/png"}},
    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    { test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
    {
    test: /\.jsx$/,
    loaders: …

我有一个用JSX编写的NodeJS服务器代码,我正在导入superagent,如下所示:

import request from 'superagent';

当服务器在构建后启动时,我收到以下错误:TypeError:require不是函数.这发生在我编译的代码中的以下行:

var crypto = require('crypto');

在追溯时,我意识到'强大'需要加密,这是'超级'所要求的.

我在我的客户端javascript代码中有相同的superagent导入,但工作正常.我为节点(服务器)和客户端区分了编译JS代码,两者都是相同的.因此,它的构建方式似乎不是问题.

有没有人见过这个错误,你知道需要做什么吗？

假设我在React JSX中呈现此组件:

render() {
  return (
    <h1 className="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5">Some text</h1>
  );
}

这些类触发我的JS linter作为一条太长的行,而且很难阅读.如何className在不破坏JSX语法或在JS linter中触发不同错误的情况下将React组件中的long 属性分成多行？(我正在使用ESLint).

我有一个简单的组件,它应该在我的表单组件中呈现不同类型的字段:

import React from "react";

export default class Field extends React.Component {

  render() {
    switch (this.props.type) {
      case 'textarea': {
        return (
          <div className="col-xs-12">
            <textarea
              placeholder={this.props.placeholder}
              name={this.props.name}
            >
            </textarea>
          </div>
          )
      }
      case 'text': {
        return (
          <div className="col-md-6 col-lg-4">
            <input
              type="text"
              placeholder={this.props.placeholder}
              name={this.props.name}
            />
          </div>
        )
      }
    }
  }
}

我在我的表单组件中使用此组件,如下所示:

export default class SubmitForm extends React.Component {

  render() {
    return (
        .
        .
        .
        <Field
          type="text"
          placeholder="something"
          name="something"
        />
        <Field
          type="textarea"
          placeholder="another"
          name="othername"
        />
        .
        .
        .
    ) …