Tag: reactjs

扩展React.js组件: 我最欣赏Backbone.js的一件事就是简单而优雅的inheritance是如何工作的。我开始熟悉React，并且不能真正find类似于这个Backbone代码的反应 var Vehicle = Backbone.View.extend({ methodA: function() { // … } methodB: function() { // … } methodC: function() { // … } }); var Airplane = Vehicle.extend({ methodC: function() { // Overwrite methodC from super } }); 在反应中，我们有mixin ，如果我们这样做的话，使用那些我们可能会接近上面的例子 var vehicleMethods = { methodA: function() { // … } methodB: function() { // […]

与Redux的反应？那么“背景”问题呢？: 我通常在Stack上发布代码相关的东西，但这更多的是关于社区的一般想法的问题。似乎有很多人主张使用Redux和React来pipe理数据/状态，但是在阅读和学习时，我遇到了一些看起来不太正确的事情。终极版在这个页面的底部： http : //redux.js.org/docs/basics/UsageWithReact.html （传递商店），build议使用React“Context”的“Magic”。一种select是将其作为道具传递给每个容器组件。然而，它是乏味的，因为你必须通过表示组件来连线存储，只是因为它们碰巧在组件树中渲染容器。我们推荐的选项是使用一个特殊的React Redux组件来调用所有的容器组件。应对在React Context页面（ https://facebook.github.io/react/docs/context.html ）上面有一个警告：上下文是一个先进的实验性function。未来版本中的API可能会发生变化。然后在底部：正如在编写清晰的代码时最好避免使用全局variables，在大多数情况下应避免使用上下文… 不要使用上下文通过组件传递模型数据。明确地将数据通过树显示出来要容易理解所以… Reduxbuild议使用React的“上下文”function，而不是通过“道具”将store传递给每个组件。而React推荐的则相反。此外，Dan Abramov（Redux的创造者）现在似乎为Facebook（React的创造者）工作，只是为了让我更加迷惑。我阅读所有这一切的权利..？目前在这个问题上的普遍共识是什么？

如何使用React.JS正确validationinput值？: 我有一个简单的表单。所有的组件和状态都保存在Page组件中。有2个显示标题和3个input字段。第一个input应该是文本，第二个和第三个应该是整数。当用户input错误types的数据时，我想在input字段旁边popup错误消息。我的问题涉及到React.JS的最佳实践谁决定价值是有效的？我猜想input域的唯一工作就是将值返回到保存状态的组件，那么这是否意味着只有Page可以确定某个值是否有效？那我应该怎么popup来呢？页面是否必须触发一个新的布尔状态元素，它将通过perp传递给Adaptive_Input来显示错误信息？的jsfiddle JS： /** * @jsx React.DOM */ var Adaptive_Input = React.createClass({ handle_change: function(){ var new_text = this.refs.input.getDOMNode().value; this.props.on_Input_Change(new_text); }, render: function(){ return ( <div className='adaptive_placeholder_input_container'> <input className="adaptive_input" type="text" required="required" onChange= {this.handle_change} ref="input" ></input> <label className="adaptive_placeholder" alt={this.props.initial} placeholder={this.props.focused} ></label> </div> ); } }); var Form = […]

如何在React的另一个return语句中返回多行JSX？: 单行工作正常 render: function () { return ( {[1,2,3].map(function (n) { return <p>{n}</p> }} ); } 不适用于多行 render: function () { return ( {[1,2,3].map(function (n) { return ( <h3>Item {n}</h3> <p>Description {n}</p> ) }} ); } 谢谢。

在Redux Reducer中读取商店的初始状态: Redux应用程序中的初始状态可以通过两种方式设置：把它作为createStore的第二个parameter passing（ docs link ）把它作为你的（子）reducer的第一个参数（ docs link ）如果您将初始状态传递给您的商店，您如何从商店中读取该状态，并将其作为您的减速器中的第一个参数？

如何使用React + ES6 + webpack导入和导出组件？: 我使用babel和webpack玩React和ES6 。我想要在不同的文件中创build多个组件，导入到一个文件中，并将其与webpack捆绑在一起比方说，我有几个这样的组件：我-navbar.jsx import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> … </Navbar> ); } } 主page.jsx import React from 'react'; import ReactDOM from 'react-dom'; import MyNavbar from './comp/my-navbar.jsx'; export class MyPage extends React.Component{ render(){ return( <MyNavbar /> … ); } […]

是否可以在DOM中多次使用React.render（）？: 我想要使用React在整个DOM中多次添加组件。这小提琴显示我想要做什么，它不会抛出任何错误。代码如下： HTML： <div id="container"> <!– This element's contents will be replaced with the first component. –> </div> <div id="second-container"> <!– This element's contents will be replaced with the second component. –> </div> JS： var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name="World" />, document.getElementById('container')); React.render(<Hello name="Second World" />, […]

ReactJS服务器端渲染与客户端渲染: 我刚开始学习ReactJS，发现它给了你两种呈现页面的方式：服务器端和客户端。但是，我不明白如何一起使用它。是build立应用程序的两种不同的方式，还是可以一起使用？如果我们可以一起使用，那么我们需要在服务器端和客户端复制相同的元素吗？或者，我们可以在服务器上构build应用程序的静态部分，还是在客户端上构builddynamic部分，而无需连接到已经预渲染的服务器端？

类扩展React.Component不能在React中使用getInitialState: 我正在使用React中的ES6语法，并编写如下的组件： export default class Loginform extends React.Component { getInitialState() { return { name: '', password: '' }; }; } 但浏览器引发了我一番惊讶：警告：getInitialState是在Loginform（一个普通的JavaScript类）上定义的。这只支持使用React.createClass创build的类。你是不是要定义一个国有财产呢？我可以用传统的语法var Loginform = React.createClass处理它，但是ES6语法是什么？另一个小东西，我觉得在传统的语法React.createClass是一个对象，所以其中的function是用逗号分隔，但与extends类需要分号，我不明白这一点。

如何组合多个内联样式对象？: 在React中，您可以清楚地创build一个对象并将其分配为内联样式。即。如以下所说的。 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); 如何组合多个对象并将它们分配在一起？