Tag: reactjs

ReactJS – 随时渲染得到调用“setState”被调用？

每次调用setState React是否重新呈现所有组件和子组件？ 如果是这样，为什么？ 我认为这个想法是React只在需要的时候呈现 – 当状态改变时。 在下面的简单示例中，尽pipe事件状态在随后的点击中没有改变，但是两个类都会在单击文本时再次呈现，因为onClick处理程序始终将state设置为相同的值： this.setState({'test':'me'}); 我会期望渲染只会发生在state数据已经改变的情况下。 下面是该示例的代码， 作为JS小提琴和embedded式代码片段： var TimeInChild = React.createClass({ render: function() { var t = new Date().getTime(); return ( <p>Time in child:{t}</p> ); } }); var Main = React.createClass({ onTest: function() { this.setState({'test':'me'}); }, render: function() { var currentTime = new Date().getTime(); return ( <div onClick={this.onTest}> <p>Time in main:{currentTime}</p> […]

你可以强制一个React组件重新渲染而不用调用setState？

我有一个外部（对组件），我想要听取更改的可观察对象。 当对象更新时，它会发出更改事件，然后我想在检测到任何更改时重新渲染组件。 有了顶层的React.render这是可能的，但是在一个组件中它不起作用（这是有道理的，因为render方法只是返回一个对象）。 这是一个代码示例： export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}> Click me </button> </div> ) } } 点击button内部调用this.render() ，但这不是真正导致渲染发生的事情（您可以看到这是实际的，因为由{Math.random()}创build的文本不会改变）。 但是，如果我简单地调用this.setState()而不是this.render() ，它工作正常。 所以我想我的问题是： React组件需要有状态才能重新渲染？ 有没有办法强制组件按需更新而不改变状态？

显示或隐藏元素

我第一次搞乱了React.js，无法通过点击事件find显示或隐藏页面内容的方法。 我没有加载任何其他库到页面，所以我正在寻找一些本地方式使用React库。 这是我迄今为止。 点击事件触发时，我想显示结果div。 var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body);

未被捕获的错误：不变的违规：元素types是无效的：期望一个string（对于内置组件）或一个类/函数，但得到：对象

我得到这个错误： 未捕获的错误：不变的违规：元素types无效：期望一个string（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。 这是我的代码： var React = require('react') var ReactDOM = require('react-dom') var Router = require('react-router') var Route = Router.Route var Link = Router.Link var App = React.createClass({ render() { return ( <div> <h1>App</h1> <ul> <li><Link to="/about">About</Link></li> </ul> </div> ) } }) var About = require('./components/Home') ReactDOM.render(( <Router> <Route path="/" component={App}> <Route path="about" component={About} /> </Route> […]

React js onClick无法将值传递给方法

我想读取onClick事件值属性。 但是当我点击它，我在控制台上看到这样的东西： SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target 我的代码工作正常。 当我运行我可以看到{column}但不能得到它在onClick事件。 我的代码： var HeaderRows = React.createClass({ handleSort: function(value) { console.log(value); }, render: function () { var that = this; return( <tr> {this.props.defaultColumns.map(function (column) { return ( <th value={column} onClick={that.handleSort} >{column}</th> ); })} {this.props.externalColumns.map(function (column) { // Multi dimension array – 0 is […]

使用ES6发电机的Reduce-saga与使用ES2017asynchronous/等待的redux-thunk的优点/缺点

现在有很多人谈论最新的孩子， yelouafi / redux-saga 。 它使用生成器函数来监听/分派操作。 在我把头围绕之前，我想知道使用redux-saga的优点/缺点，而不是下面的方法，我使用asynchronous/ await使用redux-thunk 。 一个组件可能看起来像这样，像平常一样调度操作。 import { login } from 'redux/auth'; class LoginForm extends Component { onClick(e) { e.preventDefault(); const { user, pass } = this.refs; this.props.dispatch(login(user.value, pass.value)); } render() { return (<div> <input type="text" ref="user" /> <input type="password" ref="pass" /> <button onClick={::this.onClick}>Sign In</button> </div>); } } export default connect((state) […]

在React / React Native中使用构造函数和getInitialState有什么区别？

我已经看到两个交替使用。 两者的主要用例是什么？ 有没有优点/缺点？ 是一个更好的做法？

在React.js中更新onScroll组件的样式

我已经在React中构build了一个组件，它应该在窗口滚动中更新自己的样式以创build视差效果。 组件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的值，并在滚动callback中调用setState ，但是，这使得滚动不可用，因为这是非常缓慢的。 任何build议如何做到这一点？ 谢谢。

React.js – 访问组件方法

为什么我不能从ReactJS的“外部”访问组件方法？ 为什么这是不可能的，有什么办法可以解决吗？ 考虑下面的代码： var Parent = React.createClass({ render: function() { var child = <Child />; return ( <div> {child.someMethod()} // expect "bar", got a "not a function" error. </div> ); } }); var Child = React.createClass({ render: function() { return ( <div> foo </div> ); }, someMethod: function() { return 'bar'; } }); React.renderComponent(<Parent />, […]

React.js：contentEditable的onChange事件

如何聆听基于contentEditable的控件的更改事件？ var Number = React.createClass({ render: function() { return <div> <span contentEditable={true} onChange={this.onChange}> {this.state.value} </span> = {this.state.value} </div>; }, onChange: function(v) { // Doesn't fire 🙁 console.log('changed', v); }, getInitialState: function() { return {value: '123'} } }); React.renderComponent(<Number />, document.body); http://jsfiddle.net/NV/kb3gN/1621/