Questions tagged «reactjs»

在React中，您可以清楚地创建一个对象并将其分配为嵌入式样式。即。如以下所说的。 var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; var divStyle2 = {fontSize: '18px'}; React.render(<div style={divStyle}>Hello World!</div>, mountNode); 如何合并多个对象并将它们分配在一起？

213 reactjs 

我在处理Facebook的ReactJS时遇到问题。每当我执行ajax并想要显示html数据时，ReactJS都会将其显示为文本。（见下图） 通过jquery Ajax的成功回调函数显示数据。 $.ajax({ url: url here, dataType: "json", success: function(data) { this.setState({ action: data.action }) }.bind(this) }); 有没有简单的方法可以将其转换为html？我应该如何使用ReactJS？

212 javascript  jquery  ajax  reactjs 

如何在水平和垂直的ReactNative中居中放置文本？ 我在rnplay.org中有一个示例应用程序，其中justifyContent =“ center”和alignItems =“ center”不起作用：https : //rnplay.org/apps/AoxNKQ 文本应居中。为何在文本（黄色）和父容器之间的顶部留有空白？ 码： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.topBox}> <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text> </View> <View style={styles.otherContainer}> </View> </View> ); …

212 reactjs  flexbox  react-native 

我将2个值传递给子组件： 要显示的对象列表 删除功能。 我使用.map（）函数显示对象列表（如React教程页面中给出的示例中所示），但是该组件中的按钮在onClickrender上触发该函数（不应在渲染时触发）。我的代码如下所示： module.exports = React.createClass({ render: function(){ var taskNodes = this.props.todoTasks.map(function(todo){ return ( <div> {todo.task} <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button> </div> ); }, this); return ( <div className="todo-task-list"> {taskNodes} </div> ); } }); 我的问题是：为什么onClick函数在渲染时触发，如何使其不触发？

211 javascript  reactjs  button  onclick  dom-events 

在花了一些时间学习React之后，我了解了创建组件的两个主要范例之间的区别。 我的问题是，什么时候应该使用哪个？为什么？一个人相对于另一个人的利益/取舍是什么？ ES6课程： import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } 功能性： const MyComponent = (props) => { return ( <div></div> ); } 我正在考虑什么时候只要该组件没有状态要操作就可以了，是吗？ 我在猜测是否使用任何生命周期方法，最好是使用基于类的组件。

211 javascript  reactjs  ecmascript-6  redux 

在工作时，我感到有些困惑React。 互联网上有很多示例，它们使用.js具有React的文件，但还有许多其他示例使用.jsx文件。 我已阅读过有关.jsx文件的信息，据我了解，它们只是让您在文件中编写html标签javascript。但是同样的事情也可以写在.js文件中。 那么究竟是什么这两个分机之间的实际差异.js和.jsx？

211 reactjs  jsx 

我正在尝试将数据从子组件发送到其父组件，如下所示： const ParentComponent = React.createClass({ getInitialState() { return { language: '', }; }, handleLanguageCode: function(langValue) { this.setState({language: langValue}); }, render() { return ( <div className="col-sm-9" > <SelectLanguage onSelectLanguage={this.handleLanguage}/> </div> ); }); 这是子组件： export const SelectLanguage = React.createClass({ getInitialState: function(){ return{ selectedCode: '', selectedLanguage: '', }; }, handleLangChange: function (e) { …

211 reactjs 

我的项目基于create-react-app。npm start或yarn start默认情况下将在端口3000上运行该应用程序，并且在package.json中没有指定端口的选项。 在这种情况下，如何指定自己选择的端口？我想同时运行此项目的两个（用于测试），一个在端口3005，另一个在3006

211 reactjs  npm 

该useEffect阵营钩将运行在功能上传递的每一个变化。可以对其进行优化，使其仅在所需属性更改时才调用。 如果我想从中调用初始化函数componentDidMount而不在更改时再次调用该怎么办？假设我要加载一个实体，但是加载功能不需要组件中的任何数据。我们如何使用useEffect钩子做到这一点？ class MyComponent extends React.PureComponent { componentDidMount() { loadDataOnlyOnce(); } render() { ... } } 使用钩子可能看起来像这样： function MyComponent() { useEffect(() => { loadDataOnlyOnce(); // this will fire on every change :( }, [...???]); return (...); }

205 javascript  reactjs  react-hooks 

在React中，这两种实现之间有什么真正的区别？一些朋友告诉我，FirstComponent是模式，但是我不明白为什么。SecondComponent看起来更简单，因为渲染仅被调用一次。 第一： import React, { PropTypes } from 'react' class FirstComponent extends React.Component { state = { description: '' } componentDidMount() { const { description} = this.props; this.setState({ description }); } render () { const {state: { description }} = this; return ( <input type="text" value={description} /> ); } } …

204 javascript  reactjs  components 

我是Bootstrap的新手，并且一直遇到这个问题。我有一个输入字段，只要输入一个数字，onChange就会调用from函数，但是我希望在输入完整个数字后按“ Enter”键才能调用它。验证功能存在相同的问题-调用时间过早。 var inputProcent = React.CreateElement(bootstrap.Input, {type: "text", //bsStyle: this.validationInputFactor(), placeholder: this.initialFactor, className: "input-block-level", onChange: this.handleInput, block: true, addonBefore: '%', ref:'input', hasFeedback: true });

204 javascript  twitter-bootstrap  reactjs 

我目前正在研究React JS和React Native框架。在阅读关于Facebook的Flux和Redux实现的文章时，我遇到了Immutability或Immutable-JS库。 问题是，为什么不变性如此重要？更改对象有什么问题？它不是使事情变得简单吗？ 举个例子，让我们考虑一个简单的新闻阅读器应用程序，其打开屏幕是新闻标题的列表视图。 如果我设置说最初具有值的对象数组，我将无法对其进行操作。这就是不变性原则的意思，对不对？（如果我错了，请纠正我。）但是，如果我有一个新的News对象必须更新怎么办？在通常情况下，我可以将对象添加到数组中。在这种情况下我该如何实现？删除商店并重新创建？是不是将对象添加到数组中的开销较小？

204 javascript  reactjs  functional-programming  immutability  immutable.js 

我正在用React构建一些东西，我需要在JSX中插入带有React变量的HTML。有没有办法像这样一个变量： var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; 并像这样将其插入反应中并起作用？ render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } 并按预期插入HTML吗？我还没有看到或听到任何有关可以内联执行此操作的react函数的信息，也没有听说过任何使该功能起作用的解析方法。

203 javascript  html  frontend  reactjs  react-jsx 

我是ReactJS的新手，很抱歉，如果听起来不对。我有一个根据接收到的数据创建多个表行的组件。 列中的每个单元格都有一个单选复选框。因此，用户可以从现有行中选择一个site_name和一个address。选项应在页脚中显示。那就是我被困住的地方。 var SearchResult = React.createClass({ render: function(){ var resultRows = this.props.data.map(function(result){ return ( <tbody> <tr> <td><input type="radio" name="site_name" value={result.SITE_NAME}>{result.SITE_NAME}</input></td> <td><input type="radio" name="address" value={result.ADDRESS}>{result.ADDRESS}</input></td> </tr> </tbody> ); }); return ( <table className="table"> <thead> <tr> <th>Name</th> <th>Address</th> </tr> </thead> {resultRows} <tfoot> <tr> <td>chosen site name ???? </td> <td>chosen address ????? </td> …

203 html  reactjs 

axios POST请求正在访问控制器上的url，但为我的POJO类设置了空值，当我浏览chrome中的开发人员工具时，有效负载包含数据。我究竟做错了什么？ Axios POST请求： var body = { userName: 'Fred', userEmail: 'Flintstone@gmail.com' } axios({ method: 'post', url: '/addUser', data: body }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 浏览器响应： 如果我将标头设置为： headers:{ Content-Type:'multipart/form-data' } 请求引发错误 发布多部分/表单数据时出错。Content-Type标头缺少边界 如果我在邮递员中发出相同的请求，则效果很好，并将值设置为POJO类。 任何人都可以解释如何设置边界或如何使用axios发送表单数据。

203 reactjs  react-redux  axios  ajaxform  axios-cookiejar-support