Questions tagged «reactjs»

我使用下面的代码在React组件上设置默认道具，但它不起作用。在该render()方法中，我可以看到输出“ undefined props”已打印在浏览器控制台上。如何定义组件道具的默认值？ export default class AddAddressComponent extends Component { render() { let {provinceList,cityList} = this.props if(cityList === undefined || provinceList === undefined){ console.log('undefined props') } ... } AddAddressComponent.contextTypes = { router: React.PropTypes.object.isRequired } AddAddressComponent.defaultProps = { cityList: [], provinceList: [], } AddAddressComponent.propTypes = { userInfo: React.PropTypes.object, cityList: PropTypes.array.isRequired, provinceList: …

134 reactjs  ecmascript-6 

尽管存在类似的问题，但我无法创建具有多个功能的文件。由于RN的发展非常迅速，因此不确定该方法是否已经过时。如何在React Native中创建全局助手功能？ 我是React Native的新手。 我想做的是创建一个包含许多可重用功能的js文件，然后将其导入组件中并从那里调用它。 到目前为止，我一直在做的事情可能看起来很愚蠢，但我知道您会要求这样做的，所以在这里。 我尝试创建一个类名Chandu并像这样导出它 'use strict'; import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; export default class Chandu extends Component { constructor(props){ super(props); this.papoy = { a : 'aaa' }, this.helloBandu = function(){ console.log('Hello Bandu'); }, } helloChandu(){ console.log('Hello …

133 reactjs  react-native 

我在React中构建了一个组件，该组件应该在窗口滚动时更新其自身的样式以创建视差效果。 组件render方法如下所示： function() { let style = { transform: 'translateY(0px)' }; window.addEventListener('scroll', (event) => { let scrollTop = event.srcElement.body.scrollTop, itemTranslate = Math.min(0, scrollTop/3 - 60); style.transform = 'translateY(' + itemTranslate + 'px)'); }); return ( <div style={style}></div> ); } 这是行不通的，因为React不知道组件已更改，因此该组件不会重新渲染。 我试过itemTranslate在组件状态下存储的值，并setState在滚动回调中调用。但是，这使滚动无法使用，因为这非常慢。 关于如何执行此操作的任何建议？

133 javascript  reactjs 

我目前正在React中学习钩子概念，并试图理解以下示例。 import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 上面的示例在处理程序函数参数本身上增加计数器。如果我想在事件处理函数中修改计数值怎么办 考虑下面的例子 setCount = () => …

133 javascript  reactjs  react-native  react-hooks 

与其在一个类中编写组件，不如使用函数语法。 如何覆盖componentDidMount，componentWillMount内部功能部件？ 可能吗？ const grid = (props) => { console.log(props); let {skuRules} = props; const componentDidMount = () => { if(!props.fetched) { props.fetchRules(); } console.log('mount it!'); }; return( <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}> <Box title="Sku Promotion"> <ActionButtons buttons={actionButtons} /> <SkuRuleGrid data={skuRules.payload} fetch={props.fetchSkuRules} /> </Box> </Content> ) }

133 reactjs  redux 

React钩子介绍了useState用于设置组件状态的方法。但是我如何使用钩子来代替如下代码的回调： setState( { name: "Michael" }, () => console.log(this.state) ); 我想在状态更新后做一些事情。 我知道我可以useEffect用来做其他事情，但是我必须检查状态以前的值，这需要一个位代码。我正在寻找可以与useState钩子一起使用的简单解决方案。

133 reactjs 

我正在阅读有关Flux的信息，但示例Todo应用程序对于我来说太简单了，无法理解一些关键点。 想象一下像Facebook这样的具有用户个人资料页的单页应用程序。在每个用户个人资料页面上，我们要无限滚动地显示一些用户信息及其最新帖子。我们可以从一个用户个人资料导航到另一个。 在Flux体系结构中，这将与商店和调度员相对应吗？ 我们会为PostStore每个用户使用一个，还是会有某种全球商店？调度程序呢，我们将为每个“用户页面”创建一个新的调度程序，还是使用单例？最后，体系结构的哪一部分负责管理“特定于页面的”商店的生命周期以响应路线更改？ 此外，单个伪页面可能具有相同类型的多个数据列表。例如，个人资料页上，我想同时显示关注和跟随。UserStore在这种情况下，单例如何工作？将UserPageStore管理followedBy: UserStore和follows: UserStore？

132 javascript  facebook  architecture  reactjs  reactjs-flux 

我试图找到在组件状态下从数组中删除元素的最佳方法。由于我不应该this.state直接修改变量，是否有比我在这里有更好的方法（更简洁）从数组中删除元素？： onRemovePerson: function(index) { this.setState(prevState => { // pass callback in setState to avoid race condition let newData = prevState.data.slice() //copy array from prevState newData.splice(index, 1) // remove element return {data: newData} // update state }) }, 谢谢。 更新 这已更新为在setState中使用回调。在更新当前状态时，应执行此操作。

131 javascript  reactjs 

我正在编写一个脚本，该脚本根据下拉列表的高度和输入在屏幕上的位置将下拉列表移动到输入下方或上方。我也想将修改器设置为根据其方向下拉。但是setState在内部使用componentDidUpdate会产生无限循环（这很明显） 我已经找到了使用getDOMNode和直接将classname设置为下拉列表的解决方案，但是我觉得应该使用React工具有更好的解决方案。有谁能够帮我？ 这是工作代码的一部分getDOMNode（略微忽略了定位逻辑，以简化代码） let SearchDropdown = React.createClass({ componentDidUpdate(params) { let el = this.getDOMNode(); el.classList.remove('dropDown-top'); if(needToMoveOnTop(el)) { el.top = newTopValue; el.right = newRightValue; el.classList.add('dropDown-top'); } }, render() { let dataFeed = this.props.dataFeed; return ( <DropDown > {dataFeed.map((data, i) => { return (<DropDownRow key={response.symbol} data={data}/>); })} </DropDown> ); } }); 这是带有setstate的代码（它创建一个无限循环） let …

131 javascript  reactjs  ecmascript-6 

我是ReactJS和React-Router的新手。我有一个组件，通过props <Link/>从react-router接收一个对象。每当用户单击该组件内部的“下一步”按钮时，我都想<Link/>手动调用对象。 现在，我正在使用refs访问支持实例，并手动单击<Link/>生成的'a'标记。 问题：有没有办法手动调用链接（例如this.props.next.go）？ 这是我目前的代码： //in MasterPage.js var sampleLink = <Link to="/sample">Go To Sample</Link> <Document next={sampleLink} /> //in Document.js ... var Document = React.createClass({ _onClickNext: function() { var next = this.refs.next.getDOMNode(); next.querySelectorAll('a').item(0).click(); //this sounds like hack to me }, render: function() { return ( ... <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div> …

131 javascript  reactjs  react-router 

我正在使用最新版本的react-router模块，名为react-router-dom，该模块已成为使用React开发Web应用程序时的默认模块。我想知道在POST请求后如何进行重定向。我一直在编写此代码，但是在请求之后，什么都没有发生。我在网上查看过，但是所有数据都是关于React Router的先前版本的，而关于最后一个更新的则不是。 码： import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Redirect } from 'react-router' import SignUpForm from '../../register/components/SignUpForm'; import styles from './PagesStyles.css'; import axios from 'axios'; import Footer from '../../shared/components/Footer'; class SignUpPage extends React.Component { constructor(props) { super(props); …

131 javascript  reactjs  react-router 

故事是，我应该能够将鲍勃，莎莉和杰克放进盒子里。我也可以从包装盒中取出。卸下后，将不留任何插槽。 people = ["Bob", "Sally", "Jack"] 我现在需要删除“鲍勃”。新的数组将是： ["Sally", "Jack"] 这是我的react组件： ... getInitialState: function() { return{ people: [], } }, selectPeople(e){ this.setState({people: this.state.people.concat([e.target.value])}) }, removePeople(e){ var array = this.state.people; var index = array.indexOf(e.target.value); // Let's say it's Bob. delete array[index]; }, ... 在这里，我向您展示了一个最少的代码，因为它包含更多内容（onClick等）。关键部分是从数组中删除，删除，销毁“ Bob”，但removePeople()在调用时不起作用。有任何想法吗？我一直在看这个，但由于使用React，所以我可能做错了。

130 javascript  arrays  reactjs 

我正在尝试将React map组件添加到我的项目中，但是遇到错误。我使用Fullstack React的博客文章作为参考。我在google_map.js第83行中查找了引发错误的位置： function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 到目前为止，这是我的地图组件。当我注释掉第58-60行（最后三行）时，页面加载正常（没有地图）。编辑：我做了@Dmitriy Nevzorov建议的更改，它仍然给我相同的错误。 import React from 'react' import GoogleApiComponent from 'google-map-react' export class LocationsContainer extends React.Component { constructor() { super() } render() { const style = { width: …

129 javascript  google-maps  reactjs  ecmascript-6  react-router 

我是Angular开发人员，是React的新手，这是简单的react Component，但无法正常工作 import react , { Component} from 'react'; import { render } from 'react-dom'; class TechView extends Component { constructor(props){ super(props); this.state = { name:'Gopinath' } } render(){ return( <span>hello Tech View</span> ); } } export default TechView; 错误： 使用JSX react / react-in-jsx-scope时，“ React”必须在范围内

129 reactjs 

React事件的正确类型是什么。最初，我只是any为了简单起见而使用。现在，我正在尝试清理并避免any完全使用。 所以像这样一个简单的形式： export interface LoginProps { login: { [k: string]: string | Function uname: string passw: string logIn: Function } } @inject('login') @observer export class Login extends Component<LoginProps, {}> { update = (e: React.SyntheticEvent<EventTarget>): void => { this.props.login[e.target.name] = e.target.value } submit = (e: any): void => { this.props.login.logIn() e.preventDefault() …

129 javascript  reactjs  typescript