Questions tagged «reactjs»

当是重要的传球props到super()了，为什么？ class MyComponent extends React.Component { constructor(props) { super(); // or super(props) ? } }

530 reactjs  ecmascript-6 

我收到此错误： 未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。 这是我的代码： 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}> …

528 reactjs  react-router 

我知道您可以在React类中指定样式，如下所示： var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); 我是否应该以这种方式进行所有样式设置，并且在CSS文件中完全没有指定样式？ 还是应该完全避免使用内联样式？ 两者兼而有之，似乎很奇怪而且很乱-在调整样式时需要检查两个位置。

511 css  reactjs  inline-styles  react-jsx 

每次setState调用时，React都会重新渲染所有组件和子组件吗？ 如果是这样，为什么？我以为这个想法是，当状态改变时，React只渲染所需的内容。 在下面的简单示例中，尽管onClick处理程序始终将设置state为相同的值，但是在随后的单击中状态不会改变，这两个类都在单击文本时再次呈现。 this.setState({'test':'me'}); 我曾希望只有在state数据更改的情况下才会进行渲染。 这是示例代码，例如JS Fiddle和嵌入式代码段： 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 …

502 javascript  reactjs 

您如何在React.js中执行反跳？ 我想对handleOnChange进行反跳。 我尝试过，debounce(this.handleOnChange, 200)但没有用。 function debounce(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; } var SearchBox = React.createClass({ render: function() { return <input type="search" name="p" onChange={this.handleOnChange} />; }, handleOnChange: function(event) { …

496 javascript  reactjs 

现在有很多关于redux镇上最新的孩子redux-saga / redux-saga的讨论。它使用生成器功能来侦听/调度动作。 在开始思考之前，我想知道使用优缺点的方法，redux-saga而不是下面使用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) …

488 javascript  reactjs  redux  redux-thunk  redux-saga 

我有两个组成部分。 父组件 子组件 我试图从父级调用孩子的方法，我尝试过这种方法，但没有得到结果 class Parent extends Component { render() { return ( <Child> <button onClick={Child.getAlert()}>Click</button> </Child> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } 有没有一种方法可以从父级调用子级的方法？ 注意：子组件和父组件位于两个不同的文件中

473 javascript  reactjs 

我正在尝试设置我的 React.js应用程序，以便仅在我设置的变量为时才呈现true。 我的渲染功能的设置方式如下： render: function() { var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; return ( <div> if(this.state.submitted==false) { <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" …

466 javascript  reactjs  render 

我想在state数组的末尾添加一个元素，这是正确的方法吗？ this.state.arrayvar.push(newelement); this.setState({arrayvar:this.state.arrayvar}); 我担心，就地修改阵列push可能会引起麻烦-是否安全？ 制作数组副本的另一种选择setState似乎是浪费的。

416 javascript  reactjs 

__firebase_request_key从服务器重定向后，如何在我的routes.jsx文件中定义路由以从Twitter的单点登录过程生成的URL 捕获参数值？ http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla 我尝试使用以下路由配置，但:redirectParam没有捕获上述参数： <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router>

412 reactjs  react-router 

我正在寻找一种检测点击事件是否在组件外部发生的方法，如本文所述。jQuery最近的（）用于查看单击事件中的目标是否将dom元素作为其父元素之一。如果存在匹配项，则click事件属于子项之一，因此不被视为在组件外部。 因此，在我的组件中，我想将单击处理程序附加到窗口。处理程序触发时，我需要将目标与组件的dom子代进行比较。 click事件包含“ path”之类的属性，该属性似乎包含事件经过的dom路径。我不确定要比较什么或如何最好地遍历它，并且我认为有人必须已经将其放在聪明的实用程序函数中了……不？

410 javascript  dom  reactjs 

在<select>菜单的React组件中，我需要selected在反映应用程序状态的选项上设置属性。 在中render()，将optionState其从状态所有者传递到SortMenu组件。选项值props从JSON 传入。 render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( <option value={option.value}{selected}>{option.label}</option> ); }); // pass {options} to the select menu jsx 但是，这会在JSX编译上触发语法错误。 这样做可以摆脱语法错误，但显然不能解决问题： var selected = (optionState === option.value) ? 'selected' : …

402 javascript  reactjs 

我正在关注React Native官方网站上的教程。 使用以下内容构建我的项目： react-native run-ios 我收到错误： Found Xcode project TestProject.xcodeproj xcrun: error: unable to find utility "instruments", not a developer tool or in PATH Command failed: xcrun instruments -s xcrun: error: unable to find utility "instruments", not a developer tool or in PATH 虽然，当我从.xcodeproj运行应用程序时，一切正常。 有什么建议么？

394 javascript  ios  reactjs  react-native  ios-simulator 

我试图通过使用这样的嵌套属性来组织我的状态： this.state = { someProperty: { flag:true } } 但是像这样更新状态 this.setState({ someProperty.flag: false }); 不起作用。如何正确完成？

389 javascript  reactjs  ecmascript-6  setstate 

在制作平凡的React示例页面后，我收到此错误： 未捕获的错误：始终违反：_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> 这是什么意思？

387 javascript  dom  reactjs