Questions tagged «reactjs»

我正在尝试在我的本机应用程序中调整图像尺寸（缩小以适合屏幕尺寸），但由于尺寸太大而无法执行。 这是代码： 'use strict'; var React = require('react-native'); var { StyleSheet, Text, TextInput, View, TouchableHighlight, ActivityIndicatorIOS, Image, Component } = React; var styles = StyleSheet.create({ description: { marginBottom: 20, fontSize: 18, textAlign: 'center', color: '#656565' }, container: { padding: 30, marginTop: 65, alignItems: 'center' }, flowRight: { flexDirection: 'row', alignItems: …

75 javascript  reactjs  react-native 

刚接触React并尝试循环对象属性，但是React抱怨对象不是有效的React子代，有人可以给我一些如何解决此问题的建议吗？我添加了createFragment，但不确定是否需要执行此操作或应该采用哪种方法？ JS var tifs = {1: 'Joe', 2: 'Jane'}; var tifOptions = Object.keys(tifs).forEach(function(key) { return <option value={key}>{tifs[key]}</option> }); 渲染功能 render() { const model = this.props.model; let tifOptions = {}; if(model.get('tifs')) { tifOptions = Object.keys(this.props.model.get('tifs')).forEach(function(key) { return <option value={key}>{this.props.model.get('tifs')[key]}</option> }); } return ( <div class={cellClasses}> <div class="grid__col-5 text--center grid__col--bleed"> <h5 class="flush …

75 javascript  reactjs 

const rootEl = document.getElementById('root'); ReactDOM.render( <BrowserRouter> <Switch> <Route exact path="/"> <MasterPage /> </Route> <Route exact path="/details/:id" > <DetailsPage /> </Route> </Switch> </BrowserRouter>, rootEl ); 我正在尝试访问DetailsPage组件中的ID，但无法访问它。我试过了 <DetailsPage foo={this.props}/> 将参数传递给DetailsPage，但徒劳。 export default class DetailsPage extends Component { constructor(props) { super(props); } render() { return ( <div className="page"> <Header /> <div id="mainContentContainer" > …

75 reactjs  react-router 

我试图将图标添加到使用webpack创建的基于React的网站上。添加favicon完全是一场噩梦，而我尝试了许多解决方案都无济于事。向我推荐的最新解决方案称为“ favicons-webpack-plugin”，可在以下位置找到：https : //github.com/jantimon/favicons-webpack-plugin。 如果有人能告诉我我做错了什么，将非常感谢您的协助。 当我运行'npm run start'时出现以下错误 这是我的目录结构： 这是我的webpack.config.js文件： const path = require('path'); const merge = require('webpack-merge'); const webpack = require('webpack'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const TARGET = process.env.npm_lifecycle_event; const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); var favicons = require('favicons'), …

75 javascript  node.js  reactjs  webpack  favicon 

React Component和React Element有什么区别？该文档提到了两者，但没有详细介绍，某些方法需要组件，其他元素...

75 javascript  reactjs 

我对React有点困惑，我很喜欢它。它比Angular更为冗长（带有|过滤器的ng-repeat是无价的），但是还可以。 让我烦恼的是，我应该如何将React与Django模板一起使用。我应该将所有JavaScript连同“ HTML”标记一起放入模板中。 实施Angular非常无缝。我只是将一些属性放到template / django表单类中，然后在单独的文件中编写了javascript。包括该文件，就完成了。 如何对“使用”做出反应？正确的方法是什么？ 提前致谢！

74 django  angularjs  reactjs 

我开始使用react-router v4。<Router>我的app.js中有一个简单的导航链接（请参见下面的代码）。如果我导航到localhost/vocabulary，路由器会将我重定向到正确的页面。但是，当我在之后按重新加载（F5）（localhost/vocabulary）时，所有内容消失并且浏览器报告Cannot GET /vocabulary。那怎么可能？有人可以给我任何解决方法的提示（正确重新加载页面）吗？ App.js： import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import { Switch, Redirect } from 'react-router' import Login from './pages/Login' import Vocabulary from './pages/Vocabulary' const appContainer = document.getElementById('app') ReactDOM.render( <Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/vocabulary">Vocabulary</Link></li> …

74 javascript  reactjs  routes  localhost  react-router 

我有一个组件，该组件获取作为道具的项目map集合，并将其作为呈现为父组件子项的组件集合。我们使用存储WebSQL为字节数组的图像。在map函数中，我从项目中获取图像ID，并异步调用，DAL以获取图像的字节数组。我的问题是我无法将诺言传播到React中，因为它不是设计来处理渲染中的诺言的（无论如何我还是不能说的）。我来自C#背景，所以我猜我在寻找类似await关键字的内容来重新同步分支代码。 该map函数看起来像这样（简化）： var items = this.props.items.map(function (item) { var imageSrc = Utils.getImageUrlById(item.get('ImageId')); // <-- this contains an async call return ( <MenuItem text={item.get('ItemTitle')} imageUrl={imageSrc} /> ); }); 该getImageUrlById方法如下所示： getImageUrlById(imageId) { return ImageStore.getImageById(imageId).then(function (imageObject) { //<-- getImageById returns a promise var completeUrl = getLocalImageUrl(imageObject.StandardConImage); return completeUrl; }); } 这是行不通的，但是我不知道我需要修改什么才能使它工作。我尝试向链中添加另一个Promise，但是由于我的render函数返回一个Promise而不是合法的JSX，因此出现错误。我当时在想，也许我需要利用一种React生命周期方法来获取数据，但是由于我需要props已经存在该方法，所以我不知道该在哪里进行操作。

74 javascript  reactjs  q 

我在我的create-react-app项目中使用笑话和酵素。运行时npm test，我得到一个输出，该输出显示已通过的测试文件的名称，但我希望该输出还包括测试的名称。 例： Button.test.js it ('renders button', () => { const button = shallow(<Button type="save"/>); expect(toJson(button)).toMatchSnapshot(); }); 现在，当我运行npm test时，输出仅为： 通过src / Button.test.js“ 以及通过和失败测试的数量（测试成功时）。我希望输出包含“ renders button”和任何其他测试描述（例如运行rspec测试时输出的外观）。

74 reactjs  jestjs  enzyme  create-react-app 

Import_this import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native'; 这是我的React Button代码，但是样式无法正常运行... <Button onPress={this.onPress.bind(this)} title={"Go Back"} style={{color: 'red', marginTop: 10, padding: 10}} /> 我也尝试过此代码 <Button containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: 'white'}} style={{fontSize: 20, color: 'green'}} onPress={this.onPress.bind(this)} title={"Go Back"} > Press me! </Button> 更新问题： 我也尝试过这种方式.. <Button onPress={this.onPress.bind(this)} title={"Go Back"} style={styles.buttonStyle} >ku ka</Button> …

74 reactjs  react-native  jsx  react-native-button 

我将我的React网站build/文件夹部署到了一个AWS S3存储桶中。 如果转到www.mywebsite.com，它会起作用，如果单击a标记转到“项目”和“关于”页面，它将带我到正确的页面。但是，如果我复制并发送页面url或直接转到以下链接：www.mywebsite.com/projects，它将返回404。 这是我的App.js代码： const App = () => ( <Router> <div> <NavBar/> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/projects" component={Projects}/> <Route exact path="/about" component={About}/> <Route component={NoMatch}/> </Switch> </div> </Router> );

74 javascript  reactjs  amazon-web-services  amazon-s3 

我正在制作一个React应用程序，该应用程序允许您创建列表并保存它，但是React一直警告我，我的元素没有唯一的键道具（元素List / ListForm）。如何为用户创建的元素创建唯一的键道具？下面是我的React代码 var TitleForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var listName = {'name':this.refs.listName.value}; this.props.handleCreate(listName); this.refs.listName.value = ""; }, render: function() { return ( <div> <form onSubmit={this.handleSubmit}> <input className='form-control list-input' type='text' ref='listName' placeholder="List Name"/> <br/> <button className="btn btn-primary" type="submit">Create</button> </form> </div> ); } }); var ListForm = React.createClass({ getInitialState: …

74 reactjs 

我正在努力 PUBLIC_URL=http://example.com npm run build 使用最新的create-react-script构建的项目。 但是，%PUBLIC_URL%in的出现public/index.html被替换为空字符串，而不是期望值PUBLIC_URL。 public/index.html 包含类似的代码 <script src="%PUBLIC_URL%/static/js/jarvis.widget.min.js"></script> 数小时的互联网搜索和堆栈溢出表明几乎没有写关于 PUBLIC_URL。我从GitHub克隆了create-react-app，并且一直在浏览代码，但尚未获得启发。 有人对我做错了什么建议吗？

73 javascript  reactjs  create-react-app 

我知道将状态设置为打开是一种反模式，componentDidMount应该将状态设置为打开，componentWillMount但是假设我想将li标记数量的长度设置为状态。在那种情况下，我无法将状态设置为on，componentWillMount因为li在该阶段可能未安装标签。那么，这里最好的选择是什么？如果将状态设置为开启，会componentDidMount好吗？

73 reactjs 

为了在控制台中进行调试，React中是否有任何机制可以使用DOM元素实例来获取支持的React组件？ 先前已经在生产代码中使用此问题时询问过此问题。但是，我的重点是用于调试目的的开发版本。 我熟悉React的Chrome调试扩展，但是并非在所有浏览器中都可用。将DOM资源管理器和控制台结合使用，可以轻松地使用“ $ 0”快捷方式来访问有关突出显示的DOM元素的信息。 我想在调试控制台中编写如下代码：getComponentFromElement（$ 0）.props 即使在React开发构建中，也没有机制可以使用元素的ReactId来获取组件吗？

73 javascript  reactjs