Tag: reactjs

Sass与CSS模块和Webpack

我一直在使用Webpack,Sass和CSS模块构build一个项目。 通常在我的.scss文件中,我定义了一个类如下: :local(.button) { color: white; } 在我的React组件中,在render方法中,我需要样式: render = () => { const styles = require('./MyStyles.scss'); <div className={ styles.button } /> } 和世界都好。 一切都按预期工作。 现在我正在阅读CSS模块页面 ,注意到没有一个select器被:local()包含在内,而且他们导入的样式如下: import styles from './MyStyles.scss'; 我认为“哇,看起来更好,更容易看到它的import等,而我不想使用:local() ,只是本地默认情况下。 所以我试了一下,立即遇到了几个问题。 1)`从./MyStyles.scss'导入样式; 因为我在我的React文件上使用了ESLint,所以我马上得到一个错误: MyStyles.scss没有默认的导出,这通常是有意义的,但CSS模块页面声明: 从JS模块导入CSS模块时,它会导出一个包含从本地名称到全局名称的所有映射的对象。 所以我自然希望样式表的默认导出也是他们所指的对象。 2)我试着import { button } from './MyStyles.scss'; 这通过linting,但button日志为未定义。 3)如果我恢复到导入我的样式的require方法,任何未指定的:local是未定义的。 作为参考,我的webpack加载器(我也包括Node-Neat和Node-Bourbon ,两个很棒的库): { test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + […]

stream量最佳实践:在Web API Utils中存储调度操作,AJAX调用?

我明白,这个图像已经成为大多数(如果不是全部的话)Flux程序员的最终指导。 考虑到这一点,我有几个问题: 我的Web API Utils中是否有所有$.ajax调用是正确的/强烈build议? callback调用动作创build者,传递过程中的数据 如果我想让我的商店进行AJAX调用 ,我必须先调用Action Creator ,对吗? 直接从Store中调用Web API Utils中的函数从根本上说是不正确的? 有没有像从商店连接到动作创作者的虚拟单向箭头? 我有很多操作,没有通过意见 调度员和商店之间的callback是什么? 这里的Web API是什么? 这是你在哪里应用RESTful API? 有没有这个地方的例子? 在我的一个动作创作者中有一个涉及的逻辑(知道发送哪个动作 )可以吗? 基本上,这个动作接收来自我的AJAX调用的响应。 这是一个片段: var TransportActions = { receiveProxyMessage: function (message, status, xhr) { switch (message) { case ProxyResponses.AUTHORIZED: AppDispatcher.dispatch({ type: ActionTypes.LOGIN_SUCCESS, reply: m }); break; case ProxyResponses.UNAUTHORIZED: AppDispatcher.dispatch({ type: ActionTypes.LOGIN_FAIL, reply: m }); […]

从外部更新组件状态React(在服务器响应上)

我正在学习React。 目前,我有几个components被链接作为亲子,通过它们之间的通信很容易与callback。 我有一个表 (反应组件)和一个小的模态Ajax forms (没有反应)。 当我收到来自服务器的响应 (一个项目)时,我想将项目添加到表格中。 我的主要问题是,是否可以从外部 触发组件状态更改 (在这种情况下,服务器响应)?

未捕获错误:不变违例:findComponentRoot(…,… $ 110):无法find元素。 这可能意味着DOM意外地发生了变化

我在做什么错误的嵌套周期在React? 我在Googlesearch了信息,但没有find合适的信息。 你能帮我find,我明白错了吗? 从图中可以看出,我有一个variables的数据。 它工作正常。 但是当我添加一个值不是从这个<tr> ,错误出现! var TableBalls80 = React.createClass({ render:function(){ var rows = this.props.rows; var columnId = 0, trKey = 0, divKey = 0, td1stKey = 0; var td2ndKey = 100; return( <table className='table table-bordered bg-success'> <thead> <tr className='danger'> {rows[0].row.map(function (element){ columnId++; return ( <th colSpan="2" key={columnId}>{columnId}</th>); })} </tr> </thead> <tbody> {rows.map(function (rowElement){ […]

在react-native中调用Appregistry.runApplication时出错

我想在Android模拟器上运行一个反应原生应用程序,但我得到一个错误 调用Appregistry.runApplication时出错 AVD:“Nexus_5X_API_23(AVD) – 6.0操作系统:Windows 10 请帮忙吗?

反应:这在事件处理程序中是空的

我有一个LoginForm组件。 我想在提交之前检查, password和password loginName设置。 我试着用这个代码(省略了很多东西): class LoginForm extends Component { constructor() { super(); this.state = { error: "", loginName: "", password: "", remember: true }; } submit(e) { e.preventDefault(); if(!this.state.loginName || !this.state.password) { //this is null this.setState({ error: "Fill in both fields" }); } else { console.log("submitting form"); } } render() { return ( <div […]

在同构React组件中导入CSS文件

我有一个用ES6编写的组件的React应用程序 – 通过Babel和Webpack传输。 在一些地方,我想包含特定的CSS文件与特定的组件,如反应webpack食谱build议 但是,如果在任何组件文件中,我需要一个静态CSS资源,例如: import '../assets/css/style.css'; 然后编译失败,出现错误: SyntaxError: <PROJECT>/assets/css/style.css: Unexpected character '#' (3:0) at Parser.pp.raise (<PROJECT>\node_modules\babel-core\lib\acorn\src\location.js:73:13) at Parser.pp.getTokenFromCode (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:423:8) at Parser.pp.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:106:15) at Parser.<anonymous> (<PROJECT>\node_modules\babel-core\node_modules\acorn-jsx\inject.js:650:22) at Parser.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\plugins\flow.js:694:22) at Parser.pp.nextToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:98:71) at Object.parse (<PROJECT>\node_modules\babel-core\lib\acorn\src\index.js:105:5) at exports.default (<PROJECT>\node_modules\babel-core\lib\babel\helpers\parse.js:47:19) at File.parse (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:529:46) at File.addCode (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:611:24) 看来,如果我尝试在组件文件中需要一个CSS文件,那么Babel加载器会将其解释为另一个源文件,并尝试将CS​​S传输到Javascript中。 这是预期的吗? 有没有办法做到这一点 – 允许转储的文件显式引用静态资产是不是被转发? 我已经为.js / jsx和CSS资源指定了加载器,如下所示: module: { loaders: […]

React-js忽略标签的“for”属性

我知道'class'我们必须使用className,但是如何得到'for'属性的反应呢? 下列: <label for="recipient-name" className="control-label">Recipient:</label> 呈现为: <label class="control-label">Recipient:</label> 在一个不相关的说明中,我发现在使用React时,我无法使用chrome的控制台更改属性。 有没有办法呢? 例如,如果我检查呈现的元素,并手动添加“for”属性,它会消失,当我点击远离该控制(大概是因为反应重新渲染控制我猜)

如果文件名为jsx,webpack无法find模块

当我写这样的webpack.config.js module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; 并在index.jsx我导入一个react模块的App import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = document.getElementById('box') render( <App />, rootElement ) 我发现如果我在App.jsx命名模块的应用程序,然后webpack会在index.jsx说,找不到模块的App […]

react-router回到页面如何configuration历史logging?

任何人都可以告诉我如何可以回到前一页,而不是一个特定的路线? 当使用这个代码时: var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); 得到这个错误, goBack()被忽略,因为没有路由器的历史logging 这是我的路线: // Routing Components Route = Router.Route; RouteHandler = Router.RouteHandler; DefaultRoute = Router.DefaultRoute; var routes = ( <Route name="app" path="/" handler={OurSchoolsApp}> <DefaultRoute name="home" handler={HomePage} /> <Route name="add-school" […]