Questions tagged «reactjs»

我想在React中的div上使用keyDown事件。我做： componentWillMount() { document.addEventListener("keydown", this.onKeyPressed.bind(this)); } componentWillUnmount() { document.removeEventListener("keydown", this.onKeyPressed.bind(this)); } onKeyPressed(e) { console.log(e.keyCode); } render() { let player = this.props.boards.dungeons[this.props.boards.currentBoard].player; return ( <div className="player" style={{ position: "absolute" }} onKeyDown={this.onKeyPressed} // not working > <div className="light-circle"> <div className="image-wrapper"> <img src={IMG_URL+player.img} /> </div> </div> </div> ) } 它工作正常，但我想以React风格做更多。我试过了 onKeyDown={this.onKeyPressed} 在组件上。但是它没有反应。我记得它在输入元素上起作用。 码笔 …

92 reactjs  events  keypress  keydown 

我有一个复选框TSX（JSX）元素： <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> 借助VS代码，我知道的输入参数类型this.handleCheckboxClick为MouseEvent<HTMLInputElement>。所以我实现了： private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } 然后我收到一条错误消息[ts] Type 'MouseEvent' is not generic.，如下图所示： 我的软件包的版本： "@types/react": "^15.0.29", "@types/react-dom": "^15.5.0", "react": "^15.6.1", "react-dom": "^15.6.1", "typescript": "^2.3.4", 这是为什么？

92 reactjs  typescript  events  types  jsx 

我正在使用ReactJS，我的应用程序的一部分需要漂亮的打印JSON。 我得到一些JSON，例如：{ "foo": 1, "bar": 2 }，如果我JSON.stringify(obj, null, 4)在浏览器控制台中运行该代码，它会很漂亮地打印出来，但是当我在此反应代码段中使用它时： render: function() { var json = this.getStateFromFlux().json; return ( <div> <JsonSubmitter onSubmit={this.onSubmit} /> { JSON.stringify(json, null, 2) } </div> ); }, 它呈现看起来像的JSON格式"{ \"foo\" : 2, \"bar\": 2}\n"。 如何使这些字符正确解释？{

92 javascript  json  reactjs  flux 

使用css-in-js方法将类添加到React组件，如何添加多个组件？ 这是class变量： const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); 这是我的用法： return ( <div className={ this.props.classes.container }> 上面的作品，但有没有办法添加两个类，而无需使用classNamesnpm包？就像是： <div className={ this.props.classes.container + this.props.classes.spacious}>

92 css  reactjs  material-design  material-ui  jss 

Redux文档的第一个原理是： 整个应用程序的状态存储在单个存储中的对象树中。 我实际上以为我对所有原则都了解得很好。但是我现在很困惑应用程序的含义。 我理解，如果应用程序仅意味着网站中复杂的小部分之一并且仅用一页即可工作。但是，如果申请意味着整个网站怎么办？我应该使用LocalStorage还是Cookie或其他某种方式保留状态树？但是如果浏览器不支持LocalStorage怎么办？ 我想知道开发人员如何保留其状态树！:)

92 reactjs  redux  flux 

我在（React.Component）上查看了Facebook的文档，其中提到了如何componentWillMount在客户端/服务器componentDidMount上调用而仅在客户端上调用。这是什么componentWillMount做的服务器？

91 reactjs 

我正在使用Sublime Text作为文本编辑器。 有一种用于格式化JavaScript文件的jsFormat，但是我找不到用于JSX的格式。 你们如何处理JSX格式？

91 reactjs  sublimetext  react-jsx 

用于bindActionCreators的Redux文档指出： 唯一的用例bindActionCreators是，当您要将一些操作创建者传递给一个不了解Redux的组件，并且您不想将调度或Redux存储传递给该组件时。 在哪里bindActionCreators使用/需要一个示例？ 哪种组件不知道Redux？ 两种选择的优点/缺点是什么？ //actionCreator import * as actionCreators from './actionCreators' function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return bindActionCreators(actionCreators, dispatch) } 与 function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return { someCallback: (postId, index) …

91 reactjs  redux  react-redux 

我只能在下看到实际的应用/public。 的配置webpack.config.js如下： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() …

91 node.js  reactjs  webpack  reactjs-flux  webpack-dev-server 

例如：codepen var InputBox = React.createClass({ render: function() { return ( <input className="mainInput" value='Some something'></input> ) } });

91 javascript  select  input  reactjs 

我正在使用Typescript，React和Redux（均在Electron中运行）开发一个项目，当我将一个基于类的组件包含在另一个组件中并试图在它们之间传递参数时，我遇到了一个问题。宽松地说，容器组件具有以下结构： class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent); 和子组件： interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, any> { ... } .... export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); 显然，我只包含基础知识，这两个类还有很多其他内容，但是当我尝试运行对我来说看起来像是有效代码的代码时，仍然出现错误。我得到的确切错误： …

91 reactjs  typescript  redux  electron  jsx 

我已经npx create-react-app在npm v7.0.7和Node v15.0.1上使用命令创建了空白的React项目 已安装： React v17.0.1， node-sass v5.0.0， 然后，我尝试将空白.scss文件导入到App组件中： App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; 引发错误： Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. package.json { "name": "react-17-node-sass-5", "version": "0.1.0", "private": …

91 reactjs  webpack  create-react-app  node-sass  sass-loader 

我有一个通过在线课程创建的简单的helloworld react应用，但是出现此错误： 无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-配置具有未知属性“ postcss”。这些属性是有效的：对象{amd，bail，cache，context，dependencies，devServer，devtool，入口，外部，装载程序，模块，名称，节点，输出，性能。 ，插件，配置文件，recordsInputPath，records utputPath，recordsPath，resolve，resolveLoader，stats，target，watch，watchOptions？}对于错别字：请更正它们。 对于加载程序选项：webpack 2不再允许配置中的自定义属性。应该更新加载程序，以允许通过module.rules中的加载程序选项传递选项。在更新加载程序之前，可以使用LoaderOptionsPlugin将这些选项传递给加载程序：插件：[new webpack.LoaderOptionsPlugin（{//测试：/.xxx$/，//可能仅将此功能应用于某些模块选项：{postcss： ...}}）]-configuration.resolve具有未知属性'root'。这些属性是有效的：object {alias？，aliasFields？，cachePredicate？，descriptionFiles？，forceExtension？，forcedModuleExtension？，extensions，fileSystem？，mainFields，mainFiles？，moduleExtensions？，modules？，plugins？，resolver？，symlinks ？，unsafeCache ?, useSyncFileSystemCalls？}-configuration.resolve.extensions [0]不能为空。 我的webpack文件是： // work with all paths in a cross-platform manner const path = require('path'); // plugins covered below const { ProvidePlugin } = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // configure source …

91 reactjs  typescript  webpack 

我知道如何（以及为什么）在JSX中添加空格，但是我想知道什么是最佳实践，或者是否有什么真正的区别？ 将两个元素包装在一起 <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> 一行添加 <div className="top-element-formatting"> Hello <span className="second-word-formatting">World!</span> </div> 用JS添加空间 <div className="top-element-formatting"> Hello {" "} <span className="second-word-formatting">World!</span> </div>

91 javascript  reactjs  react-jsx 

所以我有这个： let total = newDealersDeckTotal.reduce(function(a, b) { return a + b; }, 0); console.log(total, 'tittal'); //outputs correct total setTimeout(() => { this.setState({dealersOverallTotal: total}); }, 10); console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total newDealersDeckTotal只是一个数字数组，[1, 5, 9]例如，但是this.state.dealersOverallTotal没有给出正确的总数，但是total呢？我什至设置了超时延迟，以查看是否可以解决问题。任何明显的还是我应该发布更多代码？

91 javascript  reactjs  state  setstate