Questions tagged «reactjs»

我从React-Router v3迁移到v4时遇到一些小问题。在v3中，我可以在任何地方执行此操作： import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); 如何在v4中实现这一目标。 我知道withRouter当您在Component中时，可以使用hoc ，react上下文或事件路由器props。但对我而言并非如此。 我正在寻找v4中的NavigatingOutsideOfComponents的等效项

100 reactjs  react-router 

我有一个已创建的组件： class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { playlists: state.playlists } } export …

100 javascript  reactjs  redux 

我只是从Reactjs开始，正在编写一个简单的组件来显示 li标签并遇到此错误： 意外的令牌“ <” 我在http://jsbin.com/UWOquRA/1/edit?html,js,console,output下面的jsbin中放置了示例 请让我知道我做错了。

99 reactjs 

我和一群篮球队有过一次聚会。因此，当其中一个团队悬停时，我想为每个团队展示不同的内容。另外，我正在使用Reactjs，所以如果我有一个变量，可以将其传递给另一个很棒的组件。

99 hover  reactjs 

每当我尝试在React的中使用Font Awesome图标时render()，尽管它可以在普通HTML中运行，但它不会显示在结果网页上。 render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } 这是一个实时示例：http : //jsfiddle.net/pLWS3/ 哪里错了？

99 reactjs  font-awesome 

因此，这是我当前通过ES6导入Webpack中的图像和图标的工作流程： import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> 这变得很快。这就是我想要的： import * from './images' <img src={doggy} /> <img src={turtle} /> 我觉得必须有某种方法可以动态地从特定目录中导入所有文件（不带扩展名），然后根据需要使用这些文件。 任何人都看过此事，或者对最佳解决方案有任何想法？ 更新： 使用选择的答案，我能够做到这一点： function importAll(r) { let images = {}; r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); …

99 reactjs  webpack  ecmascript-6 

试图使react-router（v4.0.0）和react-hot-loader（3.0.0-beta.6）正常播放，但是在浏览器控制台中出现以下错误： 警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件。 index.js： import React from 'react'; import ReactDom from 'react-dom'; import routes from './routes.js'; require('jquery'); import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import './css/main.css'; const renderApp = (appRoutes) => { ReactDom.render(appRoutes, document.getElementById('root')); }; renderApp( routes() ); route.js： import React from 'react'; import { AppContainer } from 'react-hot-loader'; import { Router, Route, browserHistory, …

99 reactjs  react-router  react-hot-loader 

没有参数 function clickMe(e){ //e is the event } <button onClick={this.clickMe}></button> 带参数 function clickMe(parameter){ //how to get the "e" ? } <button onClick={() => this.clickMe(someparameter)}></button> 我想得到event。我怎么才能得到它？

99 javascript  reactjs  events  dom-events 

我有一些称为站的数据，它是一个包含对象的数组。 stations : [ {call:'station one',frequency:'000'}, {call:'station two',frequency:'001'} ] 我想为每个数组位置渲染一个ui组件。到目前为止，我可以写 var stationsArr = [] for (var i = 0; i < this.data.stations.length; i++) { stationsArr.push( <div className="station"> {this.data} </div> ) } 然后渲染 render(){ return ( {stationsArr} ) } 问题是我要打印所有数据。相反，我只想显示一个像这样的键，{this.data.call}但是什么也不打印。 如何遍历此数据并为数组的每个位置返回一个新的UI元素？

98 javascript  reactjs 

我有以下内容： <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> 使用DefaultRoute时，由于任何* Dashboard需要在Dashboard中呈现，因此SearchDashboard呈现不正确。 我想在“应用”路由内将DefaultRoute指向路由“ searchDashboard”。这是我可以使用React Router进行的操作，还是应该为此使用常规Javascript（用于页面重定向）？ 基本上，如果用户转到主页，我想将其发送给搜索仪表板。所以我想我正在寻找一个等效于React Router的功能window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

98 javascript  routes  reactjs  url-redirection  react-router 

我正在React Native中创建一个表单，并希望使TextInput屏幕宽度达到80％。 使用HTML和普通CSS，这很简单： input { display: block; width: 80%; margin: auto; } 除了React Native不支持display属性，百分比宽度或自动边距。 那我该怎么办呢？有这个问题的一些讨论中作出反应原住民的问题跟踪器，但提出的解决方案似乎是讨厌的黑客。

98 javascript  css  reactjs  react-native 

我在jsx中使用＆nbsp标记，它没有呈现空间。以下是我的代码的一小段。请帮助。 var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> </div> ); }, });

98 html  reactjs  jsx 

假设我有一个普通对象列表，this.state.list然后可以用来呈现子级列表。那么将对象插入其中的正确方法是什么this.state.list？ 下面是我认为它将起作用的唯一方法，因为您不能this.state像文档中提到的那样直接更改。 this._list.push(newObject): this.setState({list: this._list}); 这对我来说似乎很丑。有没有更好的办法？

97 javascript  reactjs 

在提交表单时，我正在尝试doSomething()取代默认的发布行为。 显然，在React中，onSubmit是表单支持的事件。但是，当我尝试以下代码时： var OnSubmitTest = React.createClass({ render: function() { doSomething = function(){ alert('it works!'); } return <form onSubmit={doSomething}> <button>Click me</button> </form>; } }); 该方法doSomething()已运行，但是此后仍执行默认的发布行为。 您可以在我的jsfiddle中进行测试。 我的问题：如何防止默认的发布行为？

97 javascript  forms  form-submit  reactjs  onsubmit 

我只是在写文本输入，onChange如果我打电话setState，那么React会重新渲染我的UI。问题是文本输入始终会失去焦点，因此我需要再次针对每个字母：D。 var EditorContainer = React.createClass({ componentDidMount: function () { $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'}); }, componentDidUpdate: function () { console.log("zde"); $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'}); }, changeSelectedComponentName: function (e) { //this.props.editor.selectedComponent.name = $(e.target).val(); this.props.editor.forceUpdate(); }, render: function () { var style = { height: this.props.height + 'px' …

97 javascript  reactjs