import { Router, Route, Link, IndexRoute, browserHistory, hashHistory } from 'react-router';
import ParameterContainer from './components/parameter/parameter-container';
import NavMenu from './components/navigation/nav-menu';
import {Alert} from 'react-bootstrap';
import SelectFilter from './components/sample/sample-container';
// Main component and root component
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: null,
roles: null,
parameterTypes: {
'STRING': 'STRING',
'BOOLEAN': 'BOOLEAN',
'INTEGER': 'INTEGER',
'DECIMAL': 'DECIMAL'
}
};
}
render() {
return (
<div>
<NavMenu />
<div className="container">
{this.props.children}
</div>
</div>
)
}
}
// page for 404
class NoMatch extends React.Component {
render() {
return (
<div className="container">
<Alert bsStyle="danger">
<h1>404: Not Found</h1>
<h3>The requested resource does not exist!</h3>
</Alert>
<img src="images/404.png" style={{display: 'block', margin: '0 auto', width: 300, height: '*'}} />
</div>
)
}
}
// render the application
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="parameter" component={ParameterContainer} />
<Route path="sample" component={SelectFilter} />
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.getElementById('react'))
import React from 'react';
export default class ParameterContainer extends React.Component {
constructor(props) {
super(props);
this.state = { parameters: [] };
this.client = rest.wrap(mime);
this.fetchFromApi = this.fetchFromApi.bind(this);
console.log('Props:' + props);
}
render() {
....
}
状态不会传播到子组件-您必须在子组件上设置道具来传递数据。可以使用react.cloneElement
向子级添加属性:
let childrenWithProps = React.cloneElement({this.props.children, {
userid: this.state.userId,
...
});
最好的方法是使用Redux来管理应用程序数据,并将应用程序级别的状态存储在Redux存储区中。如果不使用Redux,也可以考虑使用react上下文。根据文档,您可以在以下情况下使用上下文:
您希望通过组件树传递数据,而不必在每个级别手动向下传递道具
请帮帮我。我试图在谷歌找到答案,但无法正确获得。
问题内容: 我有一个调用会弹出一个的,以便用户可以选择目录。这些都是单独的类。从中传递值的正确方法是什么,以便我可以在中显示目录的路径? 编辑:更新了问题。 问题答案: 这是一个不完整的示例,但我想可以使您了解如何实现所需的目标。重要的一点是引用要在其中进行选择的属性,例如 参见下面如何将其放置在代码中: 希望对您有所帮助,对不起您没有提供完整的示例。 编辑 本质上,我们没有将任何参数传递给Abs
我正在学习通过教程在父组件和子组件之间传递数据。我仔细检查了我的代码,仍然没有找出错误。 我的index.js Home.js 按钮更改链接onClick事件正在调用changeLink函数,该函数将新链接传递给props。 错误:-
简而言之,我需要一个“购物车”一样的关系,从一个组件到网站的其余部分。我说“类似购物车”是因为它基本上是用户浏览时产生的需求列表。它不会有任何价格或税收逻辑,但每种类型的需求都有其“自己的< code >子参数,与我正在为其创建< code >接口的其他需求不同。我认为< code >需求组件将使用< code>any类型来接受输入的数据块。 截至目前,创建@Inputs和穿过整个树的大规模高速公
我不明白为什么不能在父组件上获取数据。 我有父组件-Add Button,和子组件-addTasktBox。我想把头衔从孩子传给父母。 AddButton组件中可能存在错误-因为浏览器出现如下错误: “TypeError:\u this2.props.sendData不是函数” 只要看一下submit-input“onClick={this.handleClick}”(底部)——就可以开始传递我的
问题内容: 我对React和Redux非常陌生,我正在尝试将数据从一个组件传递到另一个组件。但它没有父子关系,并且彼此独立。谁能帮我做到这一点?下面是我的代码。 另一个文件是我想发送EmpNumber的位置, 问题答案: 好的,这是一个例子。我将假设您已经配置了所有Redux存储,即创建存储,rootReducer等…,因为这是一个单独的帖子。 因此,基本的想法是,当你想更新你的终极版商店状态你