Questions tagged «reactjs»

如何将元素推入useState数组React钩子中？这是处于响应状态的旧方法吗？还是新东西？ 例如setState push示例？

123 javascript  reactjs  react-hooks 

商店应该保持自己的状态并能够调用网络和数据存储服务……在这种情况下，这些动作只是愚蠢的消息传递者， -要么- ...商店应该是动作中不可变数据的愚蠢接收者（而动作是在外部源之间获取/发送数据的动作吗？在这种情况下，商店将充当视图模型，并且能够聚合/过滤它们的数据根据动作所馈送的不可变数据设置自己的状态之前。 在我看来，它应该是一个或另一个（而不是两者的结合）。如果是这样，为什么一个偏爱/推荐另一个偏爱？

122 reactjs  reactjs-flux 

我一直在玩React，到目前为止，我真的很喜欢它。我正在使用NodeJS构建一个应用程序，并希望将React用于整个应用程序中的某些交互式组件。我不想使它成为单页应用程序。 我尚未在网上找到任何可以回答以下问题的信息： 如何在多页面应用程序中分解或捆绑我的React组件？ 目前，即使我可能永远不会在应用程序的某些部分中加载它们，我的所有组件也都在一个文件中。 到目前为止，我正在尝试使用条件语句通过搜索React将在其中渲染的容器的ID来渲染组件。我不确定100％的最佳实践是什么。看起来像这样。 if(document.getElementById('a-compenent-in-page-1')) { React.render( <AnimalBox url="/api/birds" />, document.getElementById('a-compenent-in-page-1') ); } if(document.getElementById('a-compenent-in-page-2')) { React.render( <AnimalBox url="/api/cats" />, document.getElementById('a-compenent-in-page-2') ); } if(document.getElementById('a-compenent-in-page-3')) { React.render( <AnimalSearchBox url="/api/search/:term" />, document.getElementById('a-compenent-in-page-3') ); } 我仍在阅读文档，还没有找到多页应用程序所需的内容。 提前致谢。

122 javascript  node.js  reactjs 

我试图实现经过身份验证的路由，但是发现React Router 4现在阻止了它的工作： <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> 错误是： 警告：您不应使用<Route component>和<Route children>在同一路线上；<Route children>将被忽略 在这种情况下，实现此目标的正确方法是什么？ 它出现在react-router（v4）文档中，提示类似 <Router> <div> <AuthButton/> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> <Route path="/public" component={Public}/> <Route path="/login" component={Login}/> <PrivateRoute …

122 javascript  reactjs  react-router  react-router-v4 

我似乎在将数据推入状态数组时遇到问题。我正在尝试以这种方式实现它： this.setState({ myArray: this.state.myArray.push('new value') }) 但是我相信这是不正确的方式，并导致可变性问题？

122 javascript  reactjs  immutability 

我正在构建一个小型React应用，并且我的本地图像无法加载。图像像placehold.it/200x200负载。我以为可能与服务器有关？ 这是我的App.js import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="home-container"> <div className="home-content"> <div className="home-text"> <h1>foo</h1> </div> <div className="home-arrow"> <p className="arrow-text"> Vzdělání </p> <img src={"/images/resto.png"} /> </div> </div> </div> ); } } export default App; index.js： import React, { Component } …

122 javascript  reactjs 

我第一次尝试使用React钩子，直到我意识到当我获取数据并更新两个不同的状态变量（数据和加载标志）时，我的组件（数据表）都呈现两次，即使这两个调用都看起来不错状态更新程序发生在同一功能中。这是我的api函数，它将两个变量都返回给我的组件。 const getData = url => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(async () => { const test = await api.get('/people') if(test.ok){ setLoading(false); setData(test.data.results); } }, []); return { data, loading }; }; 在普通的类组件中，您只需调用一次即可更新状态，该状态可以是一个复杂的对象，但“钩子”似乎是将状态拆分为较小的单元，其副作用似乎是多次分别更新时呈现。有什么想法可以减轻这种情况吗？

122 javascript  reactjs  react-hooks 

这可能会在负责任和有见识之间走出一条界限，但是我将反复讨论如何随着复杂性的增加和使用某些方向来构建ReactJS组件。 来自AngularJS，我想将模型作为属性传递给组件，并让组件直接修改模型。还是应该将模型拆分为各种state属性，并在向上游发送回时将其重新编译在一起？什么是ReactJS方式？ 以博客文章编辑器为例。试图直接修改模型最终看起来像： var PostEditor = React.createClass({ updateText: function(e) { var text = e.target.value; this.props.post.text = text; this.forceUpdate(); }, render: function() { return ( <input value={this.props.post.text} onChange={this.updateText}/> <button onClick={this.props.post.save}/>Save</button> ); } }); 好像错了 是否更像React的方式来制作我们的text模型属性state，并在保存之前将其编译回模型中： var PostEditor = React.createClass({ getInitialState: function() { return { text: "" }; }, componentWillMount: function() { …

121 reactjs 

在react.js中，将超时引用存储为实例变量（this.timeout）或状态变量（this.state.timeout）更好吗？ React.createClass({ handleEnter: function () { // Open a new one after a delay var self = this; this.timeout = setTimeout(function () { self.openWidget(); }, DELAY); }, handleLeave: function () { // Clear the timeout for opening the widget clearTimeout(this.timeout); } ... }) 要么 React.createClass({ handleEnter: function () { // …

121 javascript  reactjs 

谁能告诉我如何返回上一页而不是特定路线？ 使用此代码时： var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); 收到此错误，因为没有路由器历史记录，所以goBack（）被忽略了 这是我的路线： // Routing Components Route = Router.Route; RouteHandler = Router.RouteHandler; DefaultRoute = Router.DefaultRoute; var routes = ( <Route name="app" path="/" handler={OurSchoolsApp}> <DefaultRoute name="home" …

121 javascript  reactjs  react-router 

在此实时示例中可以找到以下代码 我有以下反应本机元素： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is a really long text that you can do nothing about, its gonna …

121 css  reactjs  react-native  flexbox 

如何在saga函数中访问redux状态？ 简短答案： import { select } from 'redux-saga/effects'; ... let data = yield select(stateSelectorFunction);

121 javascript  reactjs  redux  react-redux  redux-saga 

我正在尝试将GET请求作为第二个参数发送，但作为url却不起作用。 这有效，$ _ GET ['naam']返回测试： export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; 但是当我尝试这样做时，根本没有任何东西$_GET： export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php', { password: 'pass', naam: naam, score: …

121 reactjs  react-native  redux  axios 

我有以下内容： 如何摆脱蓝色下划线？代码如下： <Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link> MenuItem组件来自http://www.material-ui.com/#/components/menu 任何见解或指导将不胜感激。先感谢您。

121 javascript  reactjs  react-router 

React.PropTypes在TypeScript React Application中使用有意义吗？还是“皮带和吊带”的情况？ 由于组件类是使用Props类型参数声明的： interface Props { // ... } export class MyComponent extends React.Component<Props, any> { ... } 有添加任何真正的好处吗 static propTypes { myProp: React.PropTypes.string } 对类的定义？

121 reactjs  typescript  react-proptypes