我想在state数组的末尾添加一个元素,这是正确的方法吗？
this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});
我担心原地修改阵列push可能会造成麻烦 - 这样安全吗？
制作阵列副本的替代方案,setState这看起来很浪费.
在<select>菜单的React组件中,我需要selected在反映应用程序状态的选项上设置属性.
在render(),optionState从状态所有者传递到SortMenu组件.选项值props从JSON 传入.
render: function() {
var options = [],
optionState = this.props.optionState;
this.props.options.forEach(function(option) {
var selected = (optionState === option.value) ? ' selected' : '';
options.push(
<option value={option.value}{selected}>{option.label}</option>
);
});
// pass {options} to the select menu jsx
但是,这会在JSX编译时触发语法错误.
这样做可以消除语法错误,但显然无法解决问题:
var selected = (optionState === option.value) ? 'selected' : 'false';
<option value={option.value} selected={selected}>{option.label}</option>
我也试过这个:
var selected = (optionState === option.value) ? true : false;
<option value={option.value} {selected ? 'selected' …我有两个组成部分.
我试图从Parent调用child的方法,我尝试了这种方式,但无法得到结果
class Parent extends Component {
render() {
return (
<Child>
<button onClick={Child.getAlert()}>Click</button>
</Child>
);
}
}
class Child extends Component {
getAlert() {
alert('clicked');
}
render() {
return (
<h1 ref="hello">Hello</h1>
);
}
}
有没有办法从父母那里调用孩子的方法？
注意:Child和Parent组件位于两个不同的文件中
我在http://www.youtube.com/watch?v=x7cQ3mrcKaY上看到了React dev的演讲,并且发言人提到模型的脏检查可能很慢.但是,由于虚拟DOM在大多数情况下应该比模型更大,所以虚拟DOM之间的差异实际上并不是很差.
我非常喜欢Virtual DOM的潜在力量(特别是服务器端渲染),但我想知道所有的优点和缺点.
我有一个应用程序,我需要动态设置元素的高度(让我们说"app-content").它需要应用程序的"chrome"的高度并减去它,然后将"app-content"的高度设置为在这些约束内适合100%.这对于vanilla JS,jQuery或Backbone视图来说非常简单,但是我很难弄清楚在React中执行此操作的正确流程是什么？
下面是一个示例组件.我希望能够设置app-content的高度是窗口减去的尺寸为100%ActionBar和BalanceBar,但我怎么知道当一切都变得和我在哪里会把计算的东西,在这个阵营类？
/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
render: function () {
return (
<div className="wrapper">
<Sidebar />
<div className="inner-wrapper">
<ActionBar title="Title Here" />
<BalanceBar balance={balance} />
<div className="app-content">
<List items={items} />
</div>
</div>
</div>
);
}
});
module.exports = AppBase;
我正在阅读Redux库的文档,它有这个例子,
除了读取状态之外,容器组件还可以调度操作.以类似的方式,您可以定义一个调用的函数
mapDispatchToProps(),该函数接收dispatch()方法并返回您想要注入到表示组件中的回调道具.
这实际上没有任何意义.dispatch()你已经拥有了为什么需要mapDispatchToProps？
他们还提供了这个方便的代码示例:
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
有人可以用非专业人士的术语解释这个功能是什么以及为什么它有用？
如何在routes.jsx文件中定义路由,以便__firebase_request_key从服务器重定向后从Twitter的单点登录进程生成的URL中捕获参数值？
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
我尝试使用以下路由配置,但是:redirectParam没有捕获所提到的参数:
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
我正在寻找一种方法来检测是否在组件外发生了单击事件,如本文所述.jQuery nearest()用于查看click事件中的目标是否具有dom元素作为其父元素之一.如果匹配,则click事件属于其中一个子项,因此不被视为在组件之外.
所以在我的组件中,我想将一个单击处理程序附加到窗口.当处理程序触发时,我需要将目标与我的组件的dom子项进行比较.
click事件包含"path"之类的属性,它似乎保存了事件所经过的dom路径.我不确定要比较什么或如何最好地遍历它,我认为有人必须已经把它放在一个聪明的实用功能中......不是吗？
在当前版本的React Router(v3)中,我可以接受服务器响应并使用它browserHistory.push来转到相应的响应页面.但是,这在v4中不可用,我不确定处理它的适当方法是什么.
在此示例中,使用Redux,在用户提交表单时调用components/app-product-form.jsthis.props.addProduct(props).当服务器返回成功时,用户将进入购物车页面.
// actions/index.js
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
browserHistory.push('/cart'); // no longer in React Router V4
});
}
如何从React Router v4的功能重定向到Cart页面？
我刚刚react-router从v3 更换为v4.
但我不知道如何以编程方式导航到一个成员函数Component.即在handleClick()功能中我想/path/some/where在处理一些数据后导航到.我曾经这样做过:
import { browserHistory } from 'react-router'
browserHistory.push('/path/some/where')
但我在v4中找不到这样的接口.
如何使用v4导航？