Questions tagged «reactjs»

我有一个问题，我不知道如何解决。在我的react组件中，我在底部显示一长串数据和少量链接。单击任何此链接后，我将在列表中添加新的链接集合，并需要滚动到顶部。 问题是- 呈现新集合后如何滚动到顶部？ 'use strict'; // url of this component is #/:checklistId/:sectionId var React = require('react'), Router = require('react-router'), sectionStore = require('./../stores/checklist-section-store'); function updateStateFromProps() { var self = this; sectionStore.getChecklistSectionContent({ checklistId: this.getParams().checklistId, sectionId: this.getParams().sectionId }).then(function (section) { self.setState({ section, componentReady: true }); }); this.setState({componentReady: false}); } var Checklist = React.createClass({ …

165 scroll  reactjs  render 

在React 16.2中，增加了对的支持Fragments。可以在React的博客文章中找到更多信息。 我们都熟悉以下代码： render() { return ( // Extraneous div element :( <div> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </div> ); } 是的，我们需要一个容器div，但这没什么大不了的。 在React 16.2中，我们可以这样做以避免周围的容器div： render() { return ( <Fragment> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </Fragment> ); } 无论哪种情况，我们仍然需要围绕内部元素的容器元素。 …

165 reactjs 

我正在尝试学习钩子，该useState方法使我感到困惑。我正在将初始值分配给数组形式的状态。useState即使使用spread(...)或，in中的set方法对我也不起作用without spread operator。我已经在另一台PC上创建了一个API，我正在调用该API并提取要设置为状态的数据。 这是我的代码： import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const StateSelector = () => { const initialValue = [ { category: "", photo: "", description: "", id: 0, name: "", rating: 0 } ]; const [movies, setMovies] = useState(initialValue); useEffect(() => { (async …

163 javascript  reactjs  react-hooks 

我尝试编写一个React组件。对于html标题标签（h1，h2，h3等），其中标题优先级根据我们在道具中定义的优先级动态变化。 这是我尝试做的。 <h{this.props.priority}>Hello</h{this.props.priority}> 预期输出： <h1>Hello</h1> 这是行不通的。有什么可能的方法可以做到这一点？

162 reactjs  jsx 

有人可以解释一下 <Route exact path="/" component={Home} /> 和 <Route path="/" component={Home} /> 我不知道“确切”的意思

161 reactjs  react-router  react-router-dom 

react-native run-android命令会在Android模拟器中留下一条消息来终止。消息如下： 无法加载脚本。请确保您正在运行Metro服务器，或者已正确捆绑了软件包“ index.android.bundle”以进行发布。 我究竟做错了什么？

160 reactjs  react-native  react-native-android  react-native-cli  metro-bundler 

我有以下状态： this.setState({ selected: { id: 1, name: 'Foobar' } }); 然后我更新状态： this.setState({ selected: { name: 'Barfoo' }}); 由于setState假设要合并，因此我希望它是： { selected: { id: 1, name: 'Barfoo' } }; 但是它吃了id，状态为： { selected: { name: 'Barfoo' } }; 这是预期的行为吗？仅更新嵌套状态对象的一个​​属性的解决方案是什么？

159 javascript  reactjs 

如何在ReactJS中获得视口高度？在普通的JavaScript中，我使用 window.innerHeight() 但是使用ReactJS，我不确定如何获取此信息。我的理解是 ReactDOM.findDomNode() 仅适用于创建的组件。但是，documentor body元素不是这种情况，它可能会给我窗口的高度。

159 javascript  reactjs  window  viewport 

这是我尝试过的方法以及出现问题的方法。 这有效： <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> 这不是： <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> description属性只是HTML内容的普通字符串。但是由于某种原因，它呈现为字符串，而不是HTML。 有什么建议？

159 javascript  html  reactjs  jsx 

我正在开发React应用程序时探索React Native的可能性，并借助Navigatorcomponent在视图之间进行自定义导航。 主应用程序类呈现导航器，并在内部renderScene返回传递的组件： class App extends React.Component { render() { return ( <Navigator initialRoute={{name: 'WelcomeView', component: WelcomeView}} configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { // count the number of func calls console.log(route, navigator); if (route.component) { return React.createElement(route.component, { navigator }); } }} /> ); } } …

158 javascript  ios  navigation  reactjs  react-native 

var MySelect = React.createClass({ change: function(){ return document.querySelector('#lang').value; }, render: function(){ return( <div> <select id="lang"> <option value="select" onChange={this.change}>Select</option> <option value="Java" onChange={this.change}>Java</option> <option value="C++" onChange={this.change}>C++</option> </select> <p></p> <p value={this.change}></p> </div> ); } }); React.render(<MySelect />, document.body); 该onChange事件不起作用。

158 javascript  reactjs 

我需要将动态类添加到常规类列表中，但不知道该如何做（我正在使用babel），如下所示： <div className="wrapper searchDiv {this.state.something}"> ... </div> 有任何想法吗？

158 css  reactjs 

是否有系统的方法来调试导致组件在React中重新渲染的原因？我放置了一个简单的console.log（）来查看它渲染了多少时间，但是在弄清楚是什么导致组件多次渲染（例如，我的情况是4次）时遇到了麻烦。是否存在显示时间轴和/或所有组件树渲染和顺序的工具？

156 reactjs  redux 

我写了一些代码： function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; } 我收到一个错误： JSX元素类型Elem没有任何构造或调用签名 这是什么意思？

156 reactjs  typescript  material-ui 

有没有办法整合React的花括号符号和href标签？假设我们在状态中具有以下值： {this.state.id} 以及标签上的以下HTML属性： href="#demo1" id="demo1" 有没有一种方法可以将id状态添加到HTML属性中以获得类似这样的信息： href={"#demo + {this.state.id}"} 这将产生： #demo1

156 javascript  html  reactjs  ecmascript-6