Questions tagged «reactjs»

我正在用我的React应用程序运行lint，并且收到此错误： error JSX props should not use arrow functions react/jsx-no-bind 这是我运行箭头功能（在里面onClick）的地方： {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile.author}</b></span>} actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>} > <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/> …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

可以说我有一个具有条件渲染的视图组件： render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } MyInput看起来像这样： class MyInput extends React.Component { ... render(){ return ( <div> <input name={this.props.name} ref="input" type="text" value={this.props.value || null} …

103 javascript  reactjs 

webpack中的加载器和插件有什么区别？ 在对插件的文件只是说： 使用插件添加通常与webpack中的捆绑包相关的功能。 我知道babel使用加载程序进行jsx / es2015转换，但是看起来其他常见任务（例如，copy-webpack-plugin）使用插件代替。

103 javascript  reactjs  webpack 

不使用类，如何在React的功能性无状态组件中使用PropTypes？ export const Header = (props) => ( <div>hi</div> )

103 javascript  reactjs  react-props  react-proptypes 

我想问一下为什么在执行onclick事件时状态没有变化。我已经搜索了一段时间，我需要在构造函数中绑定onclick函数，但状态仍未更新。这是我的代码： import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; import BoardAddModal from 'components/board/BoardAddModal.jsx'; import style from 'styles/boarditem.css'; class BoardAdd extends React.Component { constructor(props){ super(props); this.state = { boardAddModalShow: false } this.openAddBoardModal = this.openAddBoardModal.bind(this); } openAddBoardModal(){ this.setState({ boardAddModalShow: true }); // After setting …

103 javascript  reactjs  ecmascript-6 

是否有可能在运行时检测当前版本的React是开发版还是生产版？我想做这样的事情： if (React.isDevelopment) { // Development thing } else { // Real thing }

103 javascript  reactjs 

我是ReactJS的新手，我想在组件中导入图像。这些图像位于公用文件夹内部，我不知道如何从react组件访问该文件夹。 有任何想法吗 ？ 编辑 我想在Bottom.js或Header.js中导入图像 结构文件夹为： 我不使用webpack。我是不是该 ？ 编辑2 我想使用webpack加载图像和其余资产。因此，在我的配置文件夹中，我有以下文件： 我需要在哪里添加图像的路径以及如何添加？ 谢谢

103 javascript  reactjs 

标题说明了一切。我知道为什么componentDidMount它适用于需要DOM访问的任何内容，但是AJAX请求不一定或通常都需要这样做。 是什么赋予了？

102 reactjs 

我不明白使用IndexRoute和IndexLink的目的是什么。似乎在任何情况下，除非激活了About路径，否则下面的代码都会首先选择Home组件。 <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> 与 <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> 第一种情况的优点/目的是什么？

102 javascript  reactjs  react-router  url-routing 

我已经安装了eslint-config-airbnb，它应该为React预配置ESLINT： 我们的默认导出包含我们所有的ESLint规则，包括ECMAScript 6+和React。它需要eslint，eslint-plugin-import，eslint-plugin-react和eslint-plugin-jsx-a11y。 我.eslintrc扩展了它的配置： { "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }], "react/no-multi-comp": 0, "import/default": 0, "import/no-duplicates": 0, "import/named": 0, "import/namespace": 0, "import/no-unresolved": 0, "import/no-named-as-default": 2, "comma-dangle": 0, // not sure why airbnb turned this on. …

102 javascript  reactjs  eslint  eslint-config-airbnb 

这是我的表单和onClick方法。我想在按下键盘的Enter按钮时执行此方法。怎么样 ？ 注意：没有jquery被赞赏。 comment: function (e) { e.preventDefault(); this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value}) }, <form className="commentForm"> <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br /> <input type="text" placeholder="userPostId" ref="userPostId" /> <br /> <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button> </form>

102 reactjs  reactjs-flux 

我有一个要显示字符串数组的组件。代码看起来像这样。 React.createClass({ render() { <div> this.props.data.map(t => <span>t</span>) </div> } }) 运行正常。例如，如果props.data = ['tom'，'jason'，'chris'] ，则页面中的渲染结果为tomjasonchris 然后，我想使用逗号连接所有名称，因此我将代码更改为 this.props.data.map(t => <span>t</span>).join(', ') 但是，渲染的结果是[Object]，[Object]，[Object]。 我不知道如何解释对象成为要渲染的反应组件。有什么建议吗？

102 reactjs 

我刚开始使用带有typescript的create-react-app create-react-app my-app --scripts-version=react-scripts-ts 并且默认的tslint.json配置不允许console.log（）。 我如何（暂时）启用console.log？ 此文档位于 https://palantir.github.io/tslint/rules/no-console/。但是他们没有说要把这行放在哪里： "no-console": [true, "log", "error"] 我搜索并找到了tslint.json配置文件语法，所以我尝试了以下操作： "rules": { "no-console": [true, "warning"] } 试图获取只是警告的日志消息。但这没有用。 我已经注释掉了我拥有的少量console.log（）行，但希望将来能够做到这一点。

102 reactjs  typescript  create-react-app  tslint 

我有一个要运行的文件test_stuff.js npm test 它看起来像这样： import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { assert.equal(-1, [1,2,3].indexOf(4)); }); }); …

102 javascript  reactjs  npm  react-jsx 

我是React Router的新手，并了解到重定向页面的方法有很多： 使用 browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); 使用 this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } 在React Router v4中，有this.context.history.push("/path")和this.props.history.push("/path")。详细信息：如何在React Router v4中推送到历史记录？ 我对所有这些选项感到困惑，是否有最佳的方法来重定向页面？

102 reactjs  redux  react-router