小编Dmi*_*dov的帖子

我正在用Webpack和css-loader w/modules构建我的React应用程序.我喜欢它.我的大多数样式表都非常小,我想在与我的标记和JavaScript相同的JSX文件中内联它们.

我正在使用的CSS加载器现在看起来像这样:

{ test: /\.(css)$/i, 
  loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") }

在我的JSX中,import我是单独的CSS文件,如下所示:

import classNames from 'dashboard.css';
... 
<div className={classNames.foo}></div>;

然后将其编译并转换为以下内容:

<div class="xs323dsw4sdsw_"></div>

但我想做的更像下面的内容,同时仍保留css-loader给我的本地化模块:

var classNames = cssLoader`
    .foo { color: blue; }
    .bar { color: red; }
`;

... 
<div className={classNames.foo}></div>;

这可能吗？如何在不必实际require/ import单独文件的情况下执行此操作？

在webstorm中,jsx具有与javascript相同的颜色和样式,非常棒.但是,块注释不适用于jsx /* */vs {/* */}..

我尝试*.jsx在File Types首选项中删除作为已注册的javascript模式并使jsx成为自己的文件类型,但后来我失去了所有自定义颜色和样式.有没有办法在每个模式的基础上调整块注释字符,同时使样式引用纯javascript规则？

我有commentBox.jsx文件,包含以下代码:

var CommentBox = React.createClass( {
  render: function () {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
      </div>
    );
  }
});

在index.html中,我想渲染此组件:

<div id="content"></div>
<script type="text/babel" src="scripts/commentBox.jsx"></script>

<script type="text/babel">
    ReactDOM.render(<CommentBox />, document.getElementById( 'content' ) );
</script>

但我收到错误:"CommentBox未定义"; 为什么这不起作用？如果我将所有代码放在一个文件(commentBox.js) - 它将工作.

请我为下面的reactjs页面写一个unitTest.

export default class Collapsible extends React.Component {
    static propTypes = {
        title: React.PropTypes.string,
        children: React.PropTypes.any,
    };

    render() {
        const { title } = this.props;
        return (
            <details>
                <summary>{title}</summary>
                {this.props.children}
            </details>
        );
    }
}

跟着啧啧在这里,我在下面写了我的测试

describe('Collapsible', ()=>{
    it('works', ()=>{
        let renderer = createRenderer();
        renderer.render(<Collapsible title="MyTitle"><span>HEllo</span></Collapsible>);
        let actualElement = renderer.getRenderOutput();
        let expectedElement = (<details><summary>title</summary>Details</details>);
        expect(actualElement).toEqual(expectedElement);                     
    });
});

但是,我的测试是在上面的标题中抛出错误,我怀疑我在Collapsible上的道具(即标题和孩子)没有从测试中分配.请问我该如何解决这个问题？非常感谢任何帮助或指导.

这就是我遇到的问题.在React组件的渲染函数中,我有这个:

{first_name} {last_name}

我用它替换了它:

{first_name.toUpperCase()} {last_name.toUpperCase()}

我的应用程序无法再登录.我正在使用Axios与后端通信.Axios基于承诺.在我做出改变之后.它显然开始执行我的API调用then的catch块和块login.当我在catch块中打印响应时.

function login(data, success, error) {
  axios.post('/login',
    JSON.stringify(data),
    {
      baseURL: config.apiUrl,
      headers: { 'Content-Type': 'application/json; charset=utf-8' }
    })
  .then((response) => success(response.data))
  .catch((response) => {
    console.log(response)
    error(response.status)})
}

我得到以下内容:

TypeError: Cannot read property 'toUpperCase' of undefined

上面的组件(它是一个简单的组件,只是显示页面上的道具的东西)和API调用代码之间绝对没有任何关系.

这不是我第一次在我的应用中碰到这个问题.有没有人曾经碰到这样的事情？我知道我的组件中的变量是未定义的,这就是错误出现的原因.我的问题是它是如何在应用程序的另一端进入某个承诺的catch区块的.

我正在尝试在我的应用程序中设置代码拆分/分块 - 通过路由,使用require.ensure.所以这是我的路线:

<Route path="profile" 
       getComponent={(location, cb) => 
         {require.ensure(
            [], 
            (require) => { cb(null, require('attendee/containers/Profile/').default) }, 
            'attendee')}} />

以下是我的webpack配置中的相关行:

const PATHS = {
  app: path.join(__dirname, '../src'),
  build: path.join(__dirname, '../dist'),
};

const common = {
  entry: [
    PATHS.app,
  ],

  output: {
    path: PATHS.build,
    publicPath: PATHS.build + '/',
    filename: '[name].js',
    chunkFilename: '[name].js',
    sourceMapFilename: '[name].js.map'
  },

  target: 'web',

devtool: 'cheap-module-eval-source-map',
entry: [
  'bootstrap-loader',
  'webpack-hot-middleware/client',
  './src/index',
],
output: {
  publicPath: '/dist/',
},


plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"development"',
    },
    __DEVELOPMENT__: …

自从我升级到Webpack 2后,我的"规则"中没有"排除".无法将"排除"传递给"选项".现在这样做的正确方法是什么？

之前:

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
}

现在:

{
  test: /\.js$/,
  use: [{ loader: 'babel-loader' }]
  ???
}

整个配置:

const path = require('path');
    //const autoprefixer = require('autoprefixer');
    const postcssImport = require('postcss-import');
    const merge = require('webpack-merge');
    const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

    const development = require('./dev.config.js');
    const demo = require('./demo.config.js');
    const test = require('./test.config.js');
    const staging = require('./staging.config.js');
    const production = require('./prod.config.js');

    const TARGET = process.env.npm_lifecycle_event;

    const PATHS = {
      app: path.join(__dirname, '../src'),
      build: path.join(__dirname, '../dist'),
    };

    process.env.BABEL_ENV = …

我很难将动态事件附加到我的反应组件.我有以下组件:

var ListItem = React.createClass({
    render: function() {
        return (
            <li className="selector" >
                <div className="column">
                    <h2 className="commentAuthor">
                        {this.props.author}
                    </h2>
                    <div>{this.props.children}</div>
                </div>
            </li>
        );
    }
});

var ListBox = React.createClass({
    mixins : [MyMixin],

    render : function() {
        this.nodes = this.props.data.map(function(item) {
            return <ListItem author={item.author}>{item.text}</ListItem>;
        });
        return (
            <ul id="columns">
                {this.nodes}
            </ul>
        );
    }
});

如您所见,ListItem的className设置为"selector".基于这个"选择器",我想查询节点并在MyMixin中动态附加事件.

React.renderComponent(
    <ListBox data={data} selector="li.selector" />,
    document.getElementById('example')
);

也许我的想法完全错了,因为我对React不熟悉.

问候

我松散地关注facebooks React教程, http://facebook.github.io/react/docs/getting-started.html,但我将它应用于不同的html文件.

这是我的html文件,基于react starter kit:

<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.8.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="build/comment.js"></script>
  </body>
</html>

我安装了react-tools,现在当我运行"jsx --watch src/build /"时

它正在转换此代码段:

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

进入这个片段:

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      react.DOM.div( {className:"commentBox"}, 
        " Hello, world! I am a CommentBox. "
      )
    );
  } …

目前,我正在使用PhpStorm进行JavaScript编程(React框架).在React中,添加了一个名为JSX的特殊语法糖,它允许将HTML插入到JavaScript代码中.但是当我插入一些特定的JSX时,phpstorm出错了,所以当我按Enter键转到下一行时,它会插入额外的不需要的东西{.有什么办法,如何抑制这种行为？