Questions tagged «reactjs»

React（也称为React.js或ReactJS）是Facebook开发的用于构建用户界面的JavaScript库。它使用基于组件的声明式范例，旨在既高效又灵活。

6
从保存的文本区域反应显示换行符
使用Facebook React。在设置页面中，我有一个多行textarea，用户可以在其中输入多行文本（在我的情况下为地址）。 <textarea value={address} /> 当我尝试显示地址时，例如{address}，它不会显示换行符，而是全部显示在一行上。 <p>{address}</p> 任何想法如何解决这个问题？
4
使用extract-text-webpack-plugin React时未定义窗口错误
我正在使用webpack构建我的React组件，并且试图使用extract-text-webpack-plugin来从生成的js文件中分离出CSS。但是，当我尝试构建组件时，出现以下错误： Module build failed: ReferenceError: window is not defined。 我的webpack.config.js文件如下所示： var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { MainComponent: './src/main.js' }, output: { libraryTarget: 'var', library: 'MainComponent', path: './build', filename: '[name].js' }, module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader') }] }, plugins: [ new …
82 reactjs  webpack 
4
将道具传递给react-redux容器组件
我有一个在React Native Navigator组件中创建的react-redux容器组件。我希望能够将导航器作为道具传递给此容器组件，以便在其演示组件中按下按钮之后，它可以将一个对象推入导航器堆栈。 我想这样做而无需手写react-redux容器组件给我的所有样板代码（并且也不要错过react-redux也会给我的所有优化）。 容器组件代码示例： const mapStateToProps = (state) => { return { prop1: state.prop1, prop2: state.prop2 } } const mapDispatchToProps = (dispatch) => { return { onSearchPressed: (e) => { dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator } } } const SearchViewContainer = connect( …
2
ReactJS组件的异步渲染
我想在我的ajax请求完成后呈现我的组件。 在下面您可以看到我的代码 var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(<OptionRow obj={element} />); }); return (<Input type='select'>{rows}</Input>) }) } }); 但是我收到下面的错误，因为我正在ajax请求的done方法内返回render。 Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other …
8
如何呈现同级元素而不将其包装在父标签中？
在大多数情况下，拥有父标签不是问题。 React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); 但是在某些情况下，在一个渲染函数中没有兄弟元素而没有父元素是有意义的，尤其是在使用表的情况下，您不想将表行包装在中div。 React.createClass({ render: function() { return ( <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> ); } }); 第二个示例给出以下错误：Adjacent XJS elements must be wrapped in an enclosing tag while parsing file。 如何呈现两个兄弟元素而不将它们包装在a<div>或类似的东西中？
82 reactjs 
1
在Create-React-App应用程序中index.html和index.js之间的连接在哪里？
我开始玩Create React App，但我不明白内如何index.js加载index.html。这是html代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <!-- Notice the use of %PUBLIC_URL% in the tag above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be …
15
如何为React-Router设置Google Analytics（分析）？
我正在尝试在我的React网站上设置Google Analytics（分析），并且遇到了一些程序包，但其中没有一个程序包具有与示例相同的设置。希望有人能对此有所启发。 我正在查看的软件包是react-ga。 我的渲染方法index.js如下所示。 React.render(( <Router history={createBrowserHistory()}> <Route path="/" component={App}> <IndexRoute component={Home} onLeave={closeHeader}/> <Route path="/about" component={About} onLeave={closeHeader}/> <Route path="/gallery" component={Gallery} onLeave={closeHeader}/> <Route path="/contact-us" component={Contact} onLeave={closeHeader}> <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/> </Route> <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} /> <Route path="/feedback" component={Feedback} onLeave={closeHeader} /> </Route> <Route path="*" component={NoMatch} onLeave={closeHeader}/> </Router>), document.getElementById('root'));
10
React无状态组件中的事件处理程序
试图找出在React无状态组件中创建事件处理程序的最佳方法。我可以做这样的事情： const myComponent = (props) => { const myHandler = (e) => props.dispatch(something()); return ( <button onClick={myHandler}>Click Me</button> ); } 此处的缺点是，每次呈现此组件时，都会创建一个新的“ myHandler”函数。是否有更好的方法在仍然可以访问组件属性的无状态组件中创建事件处理程序？
6
在reactjs中收听按键文档
我想绑定以在escape按下时关闭活动的反应引导弹出窗口。这是代码 _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, 但是，当我按任意键时，控制台中都不会记录任何内容。我也尝试在窗口上以及不同情况下使用'keypress'，'keyup'等来收听，但似乎我做错了。
19
渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null
我在React中有一个要在index.js中导入的组件，但是它给出了这个错误： 渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null index.js： import React from 'react'; import ReactDOM from 'react-dom'; import Search_Bar from './components/search_bar'; const API_KEY = 'AIzaSyCnpDObOLiiqN87YKJKZ-cxzdAsvYD1F-U'; const App = () => { return ( <div> <Search_Bar /> </div> ); } ReactDOM.render(<App />, document.querySelector('#root')); 零件： import React from 'react'; const Search_Bar = () => { return <input />; …
3
这是什么意思……在React JSX中休息
看一下这个React Router Dom v4示例https://reacttraining.com/react-router/web/example/auth-workflow我看到PrivateRoute组件像这样破坏了一个休息道具 const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location } }}/> ) )}/> ) 我想确定这{ component: Component, ...rest }意味着： 从中props获取Component属性，然后再提供所有其他属性，然后重命名props为，rest这样您就可以避免传递给Routerender函数的属性的命名问题 我对吗？
7
如何在react-router中限制对路由的访问？
有谁知道如何在react-router中限制对特定路由的访问？我想在允许访问特定路由之前检查用户是否已登录。我以为这很简单，但是文档尚不清楚该怎么做。 这是我应该在定义<Route>组件的位置设置的东西，还是应该在组件处理程序中处理的东西？ <Route handler={App} path="/"> <NotFoundRoute handler={NotFound} name="not-found"/> <DefaultRoute handler={Login} name="login"/> <Route handler={Todos} name="todos"/> {/* I want this to be restricted */} </Route>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.