React重新渲染但未显示正确的组件
React re-rendering but not displaying correct component
我有一个Profile
组件,它应该根据用户操作(单击标记)呈现不同的组件。我有正在传递的信息和正在更新的正确组件的状态。但是,当重新渲染Profile
组件时,它仍然渲染相同的组件,而不是新选择的组件。
class Profile extends Component {
constructor(props){
super(props);
this.state = {
currentComponent: 'sales'
}
this.changeComponent = this.changeComponent.bind(this);
}
changeComponent(component){
console.log('You are trying to change component!');
console.log(this);
this.setState({currentComponent: component});
}
render(){
let component;
switch(this.state.currentComponent){
case 'sales':
component = <Sales />;
break;
case 'income':
component = <Income />;
default:
component = <Sales />;
}
const menuItems = [
{
text: 'Sales'
},
{
text: 'Team'
},
{
text: 'Income'
},
{
text: 'Edit'
}
]
console.log(this.state);
return <div id="profileWrap">
<div id="profileMenu">
<NavMenu menuItems={menuItems} currentComponent={this.state.currentComponent} changeComponent={this.changeComponent}/>
</div>
{component}
</div>
}
}
我的Sales
/Income
组件只是
import React, {Component} from 'react';
import {Link} from 'react-router';
class Sales extends Component {
render(){
return(<h1>This is Sales!</h1>)
}
}
export default Sales;
用CCD_ 5代替CCD_。
正如您所看到的,在Profile
组件内部,当我访问该函数时,我会记录我的工作人员当时认为this
是什么(这两个似乎都是正确的),并且我还会在重新渲染时记录状态,这确实显示了正在使用的正确状态。我的switch语句有什么问题吗?
编辑
将switch语句更改为if/elseif
语句后,一切都正常。为什么switch
导致它不更新?
您的switch语句中缺少break
:
switch(this.state.currentComponent){
case 'sales':
component = <Sales />;
break;
case 'income':
component = <Income />;
break; // <-- need this here or will fall through to default.
default:
component = <Sales />;
}
更新:您还可以通过将组件添加到menuItems
数组来避免这一切。
this.state = { currentComponent: <Sales /> }
...
const menuItems = [
{
text: 'Sales'
component: <Sales />
},
...
]
然后在渲染中:{ this.state.currentComponent }
相关文章:
- React重新渲染但未显示正确的组件
- 是否有任何JavaScript UI组件可以显示字符串之间的差异
- 自定义HTML元素属性未显示-Web组件
- 带有内置图像对象的Canvas组件构造函数;t显示's图像
- ReactJS组件中显示的视频未更新
- 在另一个文件夹中显示React组件
- 访问要在 React Native Text 组件中显示的对象数组
- 如何使用Vue.js(使用Vueify)通过组件显示数据
- 如何防止其他元素在拖动任何devexpress组件时高亮显示
- <对象>中的 SVG 不会显示在 IE 的 Angular 2 组件中
- 在火狐附加组件面板中显示远程图像
- Twitter Bootstrap v3.0.0 未显示模态组件
- 显示/隐藏 ReactJS 组件而不会丢失其内部状态
- 角度中的组合框(选择组件)不基于参数设置显示值
- 在 ExtJS 组件中显示富文本
- 显示指定秒数的 CSS 组件
- 加载时未显示 JQuery-ui 组件
- 反应/reux + 引导,使组件的模态显示唯一
- Bootstrap v3.2组件显示(折叠水平面板)
- Ext4组件显示