Questions tagged «reactjs»

我收到以下错误 未捕获的TypeError：无法读取未定义的属性'setState' 即使在构造函数中绑定了delta之后。 class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); } delta() { this.setState({ count : this.state.count++ }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.delta}>+</button> </div> ); } }

315 javascript  reactjs 

调整浏览器窗口大小时，如何让React重新渲染视图？ 背景 我有一些块要在页面上单独布局，但是我还希望它们在浏览器窗口更改时更新。最终结果将类似于Ben Holland的 Pinterest布局，但使用React编写的不仅是jQuery。我还有一段路要走。 码 这是我的应用程序： var MyApp = React.createClass({ //does the http get from the server loadBlocksFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', mimeType: 'textPlain', success: function(data) { this.setState({data: data.events}); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentWillMount: function() { this.loadBlocksFromServer(); }, render: function() …

313 javascript  reactjs  resize 

我想用可选的path参数声明一个路径，因此当我添加它时，页面会做一些额外的事情（例如，填充一些数据）： http：// localhost / app / path / to / page <=渲染页面 http：// localhost / app / path / to / page / pathParam <=根据pathParam使用某些数据渲染页面 在我的React Router中，我具有以下路径，以支持两个选项（这是一个简化的示例）： <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> 我的问题是，我们可以在一条路线中声明吗？如果仅添加第二行，则找不到没有参数的路由。 编辑＃1： 这里提到的有关以下语法的解决方案对我而言不起作用，这是正确的解决方案吗？文档中是否存在？ <Route path="/product/:productName/?:urlID?" handler={SomeHandler} /> 我的react-router版本是：1.0.3

306 javascript  reactjs  react-router  react-router-v4 

是什么原因导致错误Error: EACCES: permission denied, access '/usr/local/lib/node_modules'？ npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! { Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: …

298 node.js  reactjs  npm  install 

当我create-react-app my-app在终端中键入命令时，它似乎可以正常工作-成功下载所有库，等等。但是，在该过程结束时，我收到一条消息，提示您template was not provided。 输入项 user@users-MacBook-Pro-2 Desktop% create-react-app my-app 输出量 Creating a new React app in /Users/user/Desktop/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... ..... nothing out of the ordinary here ..... ✨ Done in 27.28s. A template was not provided. This …

297 reactjs  create-react-app 

props在React.js中，没有一种简单的方法可以通过事件将孩子的孩子传递给父母吗？ var Child = React.createClass({ render: function() { <a onClick={this.props.onClick}>Click me</a> } }); var Parent = React.createClass({ onClick: function(event) { // event.component.props ?why is this not available? }, render: function() { <Child onClick={this.onClick} /> } }); 我知道您可以使用受控组件来传递输入值，但是最好传递整个工具包n'kaboodle。有时，子组件包含一些您不想查找的信息。 也许有一种方法可以将组件绑定到事件？ 更新– 9/1/2015 使用后反应了一年多，和塞巴斯蒂安·洛伯的回答的刺激下，我已经得出结论传递子组件作为参数传递给函数的父母是不是事实上的方式做出反应，也不是永远的好主意。我已经换了答案。

295 javascript  reactjs 

在JSX中，如何props从带引号的属性值内部引用值？ 例如： <img className="image" src="images/{this.props.image}" /> 产生的HTML输出为： <img class="image" src="images/{this.props.image}">

294 javascript  reactjs  react-props 

我是React的新手，正在尝试编写使用API​​的应用程序。我不断收到此错误： TypeError：this.setState不是一个函数 当我尝试处理API响应时。我怀疑此绑定有问题，但我不知道如何解决它。这是我组件的代码： var AppMain = React.createClass({ getInitialState: function() { return{ FirstName: " " }; }, componentDidMount:function(){ VK.init(function(){ console.info("API initialisation successful"); VK.api('users.get',{fields: 'photo_50'},function(data){ if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }); }, function(){ console.info("API initialisation failed"); }, '5.34'); }, render:function(){ return ( <div className="appMain"> <Header /> …

288 javascript  reactjs 

我正在尝试访问静态图像以backgroundImage在React 的内联属性中使用。不幸的是，我已经干了如何做到这一点。 通常，我认为您只是这样做如下： import Background from '../images/background_image.png'; var sectionStyle = { width: "100%", height: "400px", backgroundImage: "url(" + { Background } + ")" }; class Section extends Component { render() { return ( <section style={ sectionStyle }> </section> ); } } 这适用于<img>标签。有人可以解释两者之间的区别吗？ 例： <img src={ Background } /> 效果很好。 谢谢！

286 javascript  reactjs 

给定一个呈现其子级的简单组件： class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; 问题：孩子道具的propType应该是什么？ 当我将其设置为对象时，当我将组件与多个子级一起使用时，它将失败： <ContainerComponent> <div>1</div> <div>2</div> </ContainerComponent> 警告：无法道具类型：无效的支柱children型的array 供给ContainerComponent，预计object。 如果将其设置为数组，则如果我只给它一个孩子，它将失败： <ContainerComponent> <div>1</div> </ContainerComponent> 警告：prop类型失败：提供给ContainerComponent的对象类型无效的prop子代，预期数组。 请告知，我是否应该不麻烦对子元素进行propTypes检查？

265 reactjs  jsx  react-proptypes 

是否有可能用更新对象的属性setState？ 就像是： this.state = { jasper: { name: 'jasper', age: 28 }, } 我努力了： this.setState({jasper.name: 'someOtherName'}); 还有这个： this.setState({jasper: {name: 'someothername'}}) 第一个导致语法错误，第二个则什么都不做。有任何想法吗？

265 reactjs  state 

我有一个相对简单的问题，试图将内联脚本添加到React组件。到目前为止，我有： 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article className={[prefix('people'), prefix('people', 'index')].join(' ')}> <h1 className="tk-brandon-grotesque">People</h1> <script src="https://use.typekit.net/foobar.js"></script> <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script> </article> …

264 javascript  reactjs  ecmascript-6  react-jsx 

我目前正在使用React Router v4来嵌套路由。 最接近的示例是React-Router v4文档中的route配置 。 我想将我的应用分为两部分。 前端和管理区域。 我在想这样的事情： <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> 前端的布局和样式与管理区域不同。因此，在首页中，回家的路线大约应该是子路线。 / home应该呈现在Frontpage组件中，/ admin / home应该呈现在Backend组件中。 我尝试了一些变体，但始终以不打/ home或/ admin / home结尾。 编辑-19.04.2017 因为这篇文章现在有很多观点，所以我用最终解决方案对其进行了更新。希望对您有所帮助。 编辑-08.05.2017 …

261 javascript  reactjs  nested  react-router  react-router-v4 

我正在创建一个应用程序，用户可以在其中设计自己的表单。例如，指定字段名称以及应包含哪些其他列的详细信息。 该组件在此处可作为JSFiddle使用。 我的初始状态如下： var DynamicForm = React.createClass({ getInitialState: function() { var items = {}; items[1] = { name: 'field 1', populate_at: 'web_start', same_as: 'customer_name', autocomplete_from: 'customer_name', title: '' }; items[2] = { name: 'field 2', populate_at: 'web_end', same_as: 'user_name', autocomplete_from: 'user_name', title: '' }; return { items }; }, render: …

258 javascript  reactjs  state 

我正在使用reactjs。 当我运行下面的代码时，浏览器显示： 未捕获的TypeError：超级表达式必须为null或函数，且未定义 关于任何错误的任何暗示将不胜感激。 首先是用于编译代码的行： browserify -t reactify -t babelify examples/temp.jsx -o examples/public/app.js 和代码： var React = require('react'); class HelloMessage extends React.Component { render() { return <div>Hello </div>; } } 更新：在针对此问题的地狱之火中燃烧了三天后，我发现我没有使用最新版本的react。 全局安装： sudo npm install -g react@0.13.2 在本地安装： npm install react@0.13.2 确保浏览器也使用正确的版本： <script type="text/javascript" src="react-0.13.2.js"></script> 希望这可以为他人节省三天的宝贵生命。

256 reactjs  ecmascript-6