Questions tagged «reactjs»

我已经写了一些代码来渲染ReactJS中的重复元素，但是我讨厌它是如此丑陋。 render: function(){ var titles = this.props.titles.map(function(title) { return <th>{title}</th>; }); var rows = this.props.rows.map(function(row) { var cells = []; for (var i in row) { cells.push(<td>{row[i]}</td>); } return <tr>{cells}</tr>; }); return ( <table className="MyClassName"> <thead> <tr>{titles}</tr> </thead> <tbody>{rows}</tbody> </table> ); } 有没有更好的方法来实现这一目标？ （我想for在模板代码或类似方法中嵌入循环。）

81 javascript  reactjs 

我想知道是否有比使用if语句更好的有条件地传递道具的方法。 例如，现在我有： var parent = React.createClass({ propTypes: { editable: React.PropTypes.bool.isRequired, editableOpts: React.PropTypes.shape({...}) }, render: function() { if(this.props.editable) { return ( <Child editable={this.props.editableOpts} /> ); } else { // In this case, Child will use the editableOpts from its own getDefaultProps() return ( <Child /> ); } } }); 没有if语句，有没有办法写这个？我正在按照JSX中的一种inif-if语句的方式思考： var …

81 javascript  reactjs  inline 

我正在尝试启动刚从GitHub存储库克隆的Redux应用程序。 我尝试使用以下命令运行它 npm start 我收到此错误 > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! react-redux@1.0.0 start: `webpack-dev-server --config ./configs/webpack/webpack.config.development.js` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed …

81 javascript  reactjs  npm  redux  react-redux 

我在更改视图以响应路由时遇到麻烦。我只想显示一个用户列表，单击每个用户应导航到详细信息页面。这是路由器： import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import Users from "./components/Users"; import { Router, Route } from "react-router"; import Details from "./components/Details"; ReactDOM.render(( <BrowserRouter> <div> <Route path="/" component={Users} /> <Route path="/details" component={Details} /> </div> </BrowserRouter> ), document.getElementById('app')) 当我使用url / details时，我的浏览器会导航到该url，但不会更改视图。任何其他路由都会抛出404，因此似乎可以识别该路由，但无法更新。

81 reactjs  react-router 

我开始对使用angular做出反应，并且试图找出我可以根据条件渲染或不渲染元素的Ang- ng-if指令的替代方法。以下面的代码为例。我正在使用打字稿（tsx）btw，但这没什么大不了的。 "use strict"; import * as React from 'react'; interface MyProps {showMe: Boolean} interface MyState {} class Button extends React.Component <MyProps, MyState>{ constructor(props){ super(props); this.state = {}; } render(){ let button; if (this.props.showMe === true){ button = ( <button type="submit" className="btn nav-btn-red">SIGN UP</button> ) } else { button = …

81 reactjs 

我正在尝试使用webpack构建项目并对此webpack配置做出反应： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'babel-polyfill', './app/less/main.less', './app/main.js', 'webpack-dev-server/client?http://localhost:8080' ], output: { publicPath: '/', filename: 'dist/main.js' }, debug: true, devtool: 'source-map', module: { loaders: [ { test: /\.js$/, include: path.join(__dirname, 'app'), loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { …

80 reactjs  webpack  babeljs 

我已经使用create-react-appcli创建了一个新的react应用程序。然后我使用添加了'react-redux'库npm install --save react-redux。 在package.json我有： "react-redux": "^4.4.5" 不幸的是，该应用程序无法编译，并且抱怨： Error in ./~/react-redux/lib/utils/wrapActionCreators.js Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29 我不知道这是什么意思？ 这是完整的容器： import React,{Component} from 'react'; import {connect} from 'react-redux'; class BookList extends Component{ renderList(){ return this.props.books.map((book)=>{ <li key={book.title} >{book.title}</li> }); } render(){ return( <div> <ul> {this.renderList()} </ul> </div> ); …

80 reactjs  react-redux 

我对React有点陌生，并尝试将className设置为string + prop。但是我不确定该怎么做以及这是否是最佳实践。 所以我正在尝试做的，显然是行不通的，是这样的： <a data-featherlight='string' + {this.props.data.imageUrl}> 我该如何写呢？

80 reactjs 

据我了解，<Route path="/" component={App} />会提供App与路由相关的道具，例如location和params。如果我的App组件有许多嵌套的子组件，那么我如何在不使用以下子项的情况下让子组件访问这些道具： 从App传递道具 使用窗口对象 为嵌套的子组件创建路线 我以为this.context.router会有一些与路线有关的信息，但this.context.router似乎只有一些功能可以操纵路线。

80 javascript  reactjs  react-router 

与webstorm不同，我无法.js在Visual Studio Code中的文件中注释掉JSX代码。

79 reactjs  react-native  visual-studio-code  jsx 

设置选择框选择哪个选项的反应方式是value在其<select>自身上设置一个特殊的道具，与要选择value的<option>元素上的属性相对应。对于multiple选择，该道具可以接受数组。 现在，因为这是一个特殊属性，所以我想知道当用户更改内容时，在相同的option-values-values结构中检索选定选项的规范方法是什么（因此我可以将其通过回调传递给父组件等），因为推测相同的value属性在DOM元素上将不可用。 以一个带有文本字段的示例为例，您可以执行以下操作（JSX）： var TextComponent = React.createClass({ handleChange: function(e) { var newText = e.target.value; this.props.someCallbackFromParent(newText); }, render: function() { return <input type="text" value={this.props.someText} onChange={this.handleChange} />; } }); 替换???此多重选择组件的等效项是什么？ var MultiSelectComponent = React.createClass({ handleChange: function(e) { var newArrayOfSelectedOptionValues = ???; this.props.someCallbackFromParent(newArrayOfSelectedOptionValues); }, render: function() { return ( <select multiple={true} value={this.props.arrayOfOptionValues} onChange={this.handleChange}> …

79 javascript  dom  reactjs 

我已经阅读了文档，但是我并没有真正理解React 16hydrate()和之间的区别render()。 我知道hydrate()用来结合SSR和客户端渲染。 有人可以解释一下什么是补水，然后ReactDOM有什么区别？

79 javascript  reactjs  react-dom  react-fiber 

在React JSX中，似乎无法执行以下操作： render: function() { return ( <{this.props.component.slug} className='text'> {this.props.component.value} </{this.props.component.slug}> ); } 运行代码段隐藏结果展开摘要 我收到一个解析错误：意外令牌{。这不是React可以处理的吗？ 我正在设计此组件，以便在内部隐藏的值this.props.component.slug将包含有效的HTML元素（h1，p等）。有什么办法可以使这项工作吗？

78 javascript  reactjs 

我已经在SocketIO的帮助下创建了一个小的ReactJS仪表板，用于实时更新。即使我更新了仪表板，也使我感到不确定我是否正确执行了操作。 最让我感到困扰的是getInitialState中的Props作为反模式发布。我创建了一个仪表板，该仪表板从服务器获取实时更新，除了加载页面外，不需要用户交互。根据我的阅读，this.state应该包含一些内容，这些内容将确定是否应重新渲染该组件，以及this.props....我还不知道。 但是，当您最初调用时React.render(<MyComponent />, ...)，只能传递道具。就我而言，我从服务器获取了所有数据，因此this.state无论如何，最初的道具最终还是会结束。所以我所有的组件都有这样的东西： getInitialState: function() { return { progress: this.props.progress, latest_update: this.props.latest_update, nearest_center: this.props.nearest_center } } 除非我对上述博客文章有误解，否则这是反模式。但是我看不到将状态注入Component的其他方法，而且我不明白为什么它是一种反模式，除非我重新标记所有道具以使其成为前提initial。如果有的话，我觉得那是一种反模式，因为现在我必须跟踪比以前更多的变量（带initial和不带）。

78 reactjs 

我有一个React组件，我想从文件中加载JSON数据。即使我将变量数据创建为全局变量，控制台日志当前也不起作用 'use strict'; var React = require('react/addons'); // load in JSON data from file var data; var oReq = new XMLHttpRequest(); oReq.onload = reqListener; oReq.open("get", "data.json", true); oReq.send(); function reqListener(e) { data = JSON.parse(this.responseText); } console.log(data); var List = React.createClass({ getInitialState: function() { return {data: this.props.data}; }, render: function() { …

78 javascript  ajax  json  xmlhttprequest  reactjs