Tag: reactjs
什么是Redux @connect装饰器中的@（符号）？
我正在使用React学习Redux，并偶然发现了这个代码。 我不确定它是否是特定的Redux ，但是我在其中一个例子中看到了下面的代码片段。 @connect((state) => { return { key: state.ab }; }) 虽然connect的function是相当简单的，但我不明白connect之前@ 。 如果我没有错，它甚至不是一个JavaScript运算符。 有人可以解释这是什么，为什么使用？ 更新： 它实际上是react-redux的一部分，用于将React组件连接到Redux存储。
不变冲突：_registerComponent（…）：目标容器不是DOM元素
我做了一个微不足道的反应示例页面后，我得到这个错误： 未捕获错误：不变冲突：_registerComponent（…）：目标容器不是DOM元素。 这是我的代码： /** @jsx React.DOM */ 'use strict'; var React = require('react'); var App = React.createClass({ render() { return <h1>Yo</h1>; } }); React.renderComponent(<App />, document.body); HTML： <html> <head> <script src="/bundle.js"></script> </head> <body> </body> </html> 这是什么意思？
在使用地图时，反应“不能读取未定义的属性”
我正在从teamtreehouse.com制作一个非常基本的React应用程序，而且我经常遇到 “TypeError：无法读取属性”onPlayerScoreChange“未定义的” 即使我正确地绑定我的function（我认为） 'onPlayerScoreChange'是Grandparent组件中的一个方法，当用户点击“+”或“ – ”button来改变玩家的分数时，该方法就会执行。 如果有人可以解释什么是错误的，这将是非常有帮助的，因为我认为我在伟大的祖父母的构造函数中设置this.onPlayerScoreChange = this.onPlayerScoreChange.bind(this) 。 父组件： class App extends React.Component { constructor(props) { super(props); this.onPlayerScoreChange = this.onPlayerScoreChange.bind(this) this.state = { initialPlayers: props.initialPlayers, }; } onPlayerScoreChange(delta, index) { this.setState((prevState, props) => { return {initialPlayers: this.prevState.initialPlayers[index].score += delta} }) } render() { return( <div className = "scoreboard"> <Header title = {this.props.title}/> <div […]
ReactJS应用程序 – 弹性VS快速失败
我正在开发一个React应用程序，这是我用于组件的方法：我使用PropTypesvalidation来validation我期望得到的道具，但我仍然指定默认值以避免它如果接收到的数据出错，就会中断。 最近有人告诉我，我们不应该这样做，道具是我们期望从父母那里得到的，如果合同不被允许让组件中断。 哪种方法是正确的，有什么优点和缺点？ 我的一些考虑作为思考的食物。 按照我的初始方法，在testing中，我明确地testing了传递给被测组件的默认值一些无效的数据，并期望有效的快照仍然被打印出来。 testing不会因为一些不好的数据而失败，但是我打印出PropTypesvalidation警告（如果需要的话，虽然可以通过错误进行转换 – 我认为 – 或者在testing中嘲笑它们）。 这些警告在testing和实际应用程序中都比只看到“无法读取”someProp“未定义”或类似（并且让React渲染循环中断）的错误更加简洁明了。 propTypevalidation直接明确地告诉你你做错了什么（你通过错误的types作为道具，道具完全失踪等）。 使用第二种方法，而testing失败，因为应用程序中断。 我认为，只有当testing覆盖率真的很好（90/100％）时，这才是一个好方法，否则就是一种风险 – 它可能会在活动中破裂并破坏产品声誉。 重构或需求变更经常发生，一些边缘案例可能会以破坏应用程序的不希望的数据结束，而不是在自动或手动testing中捕获。 这意味着当应用程序处于活动状态时，由于某些不良数据，整个应用程序将停止工作，代码可能会在父组件中断，而在第一种情况下，应用程序具有弹性，并且以受控方式显示一些空的字段。 思考？ 遵循一个简单的例子： React组件 import React from 'react'; import PropTypes from 'prop-types'; import styles from './styles.css'; export const App = ({ person : { name, surname, address, subscription } = {} }) => ( <div style={styles.person}> <p> {person.name} […]
如何在React中设置嵌套状态
我尝试通过做这样的嵌套属性来组织我的状态 this.state = { someProperty: { flag:true } } 然后我试图更新我的状态 this.setState({someProperty.flag: false}); 它不这样工作。
可滚动的div粘到底部，当外部div变化的大小
这里是一个示例聊天应用程序 – > 这里的想法是让.messages-container尽可能多的占用屏幕。 在.messages-container ， .scroll保存消息列表，如果有更多的消息，那么屏幕的大小会滚动。 现在，考虑这种情况： 用户滚动到会话的底部 .text-inputdynamic变大 现在，不是用户保持滚动到对话底部，文本input增加，他们不再看到底部。 一种方法来解决它，如果我们正在使用的反应，计算文本input的高度，如果有任何改变，让.messages容器知道 componentDidUpdate() { window.setTimeout(_ => { const newHeight = this.calcHeight(); if (newHeight !== this._oldHeight) { this.props.onResize(); } this._oldHeight = newHeight; }); } 但是，这会导致可见的性能问题，并且像这样传递消息很可悲。 有没有更好的办法？ 我可以用这样的方式使用css来expression：.text-input-increase时，我想实质上shift up所有的.messages-container
ReactJS中this.state和this.setstate的区别是什么？
我想要改变hasSubmit键的值，就像在First Code部分一样。 我知道这不是build议。 但第二个代码是asynchronous的，我不想使用setState的callback函数。 this.state和setState什么区别？ 有没有办法改变状态值立即hasSubmit ？ 第一个代码： this.state.hasSubmit = false this.setState({}) //Code that will use `hasSubmit`. 第二个代码： this.setState({ hasSubmit: false, }); //Code that will use `hasSubmit`. this.setState({ hasSubmit: false, }); //Code that will use `hasSubmit`. 加： 情况是这样的： hasSubmit在getInitialState()设置为false 。 当我点击submitbutton时， hasSubmit会变成false 。 提交时， hasSubmit将变为true 。 首先点击submit没有问题，并已submit设置为true 。 但是第二次点击submit会错误的使用Second asynchronous code ，因为hasSubmit仍然是true ，而第First Code可以解决问题。
dynamic添加图像React Webpack
我一直想弄清楚如何通过React和Webpackdynamic添加图片。 我在src / images下有一个image文件夹，在src / components / index下有一个组件。 我正在使用url-loader和下面的webpackconfiguration { test: /\.(png|jpg|)$/, loader: 'url-loader?limit=200000' } 在组件中，我知道我可以添加要求（image_path）在文件顶部的特定图像在我创build组件之前，但我想使组件通用，并使其传递的图像的path父组件。 我所尝试的是： <img src={require(this.props.img)} /> 对于实际的属性，我尝试了几乎所有可以从项目根目录，响应应用程序根目录以及组件本身获取的图像的path。 文件系统 |– src | ` app.js | `–images | ` image.jpg | ` image.jpg | `– components | `parent_component.js | `child_component.js 父组件基本上只是容纳多个孩子的容器，所以… <ChildComponent img=data.img1 /> <ChildComponent img=data.img2 /> etc…. 有没有什么办法做到这一点使用反应和webpack与url-loader或我只是走错了path来接近呢？
如何在React Router v4中推送历史logging？
在当前版本的React Router（v3）中，我可以接受服务器响应，并使用browserHistory.push转到相应的响应页面。 但是，这在v4中是不可用的，我不确定处理这个问题的适当方法是什么。 在这个例子中，使用Redux时， 组件/ app-product-form.js在用户提交表单时调用this.props.addProduct(props) 。 当服务器返回成功时，用户被带到购物车页面。 // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } 如何从React Router v4的函数redirect到购物车页面？
插入HTML与反应variables语句（JSX）
我正在用React构build一些东西，我需要在JSX中插入带有Reactvariables的HTML。 有没有办法有这样的variables： var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; 并插入到像这样的反应，并有它的工作？ render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } 并按预期插入HTML？ 我还没有看到或听到任何可以做到这一点的反应函数，或parsing的东西，可以使这个工作的方法。
