这里,我的componentWillReceiveProps没有调用。实际上我正在做什么。我有2个组件,但我想有条件地显示我的组件。 让我们一步一步地谈谈:: => 1.我在这里用switch来调用我的组件。
case 4 :
return(
<Hotspotmergepreview
xml = {this.state.xml}
remedStatus = {this.state.remediationToggle}
showAns = {this.showAns}
/>
);
这是我的组件,我根据条件调用我的两个组件。
import React from 'react';
import HotspotPreview from '../components/HotspotPreview';
import Hotspotnewpreview from '../components/Hotspotnewpreview';
export default class Hotspotmergepreview extends React.Component {
constructor(props) {
super(props)
self = this
this.cType = ''
this.state = {
xml:''
}
}
componentWillReceiveProps(nextProps) {
if(this.props.xml != nextProps.xml) {
const newXml = XMLToJSON(nextProps.xml)
this.cType = newXml.smxml.div._type
this.setState({
xml:nextProps.xml
})
}
}
render(){
if(this.cType == 'w' || this.cType == 's' || this.cType == 'p') {
console.log("inside"+this.cType)
return(
<Hotspotnewpreview
xml = {this.state.xml}
remedStatus = {this.props.remediationToggle}
showAns = {this.props.showAns}
/>
);
} else {
return (
<HotspotPreview
xml = {this.state.xml}
remedStatus = {this.props.remediationToggle}
showAns = {this.props.showAns}
/>
);
}
}
}
export default class Hotspotnewpreview extends React.Component {
constructor(props){
super(props);
self = this
this.state ={
templateType: 'default',
}
this.templateArea = this.templateArea.bind(this)
this.checkXML = this.checkXML.bind(this)
}
componentWillReceiveProps(nextProps) {
if(this.props.xml != nextProps.xml) {
const newXml = XMLToJSON(nextProps.xml)
let cData = newXml.smxml.div.__cdata
cData = cData.replace(/%{/gm,' ').replace(/}%/gm,' ')
this.receivedXML = cData.replace(/(?:\r\n|\r|\n)/g,' <br>')
this.ansString = newXml.smxml.div._correctans
if(this.ansString) {
this.correctAnswers = this.ansString.split(',')
}
this.splitType = newXml.smxml.div._type
this.checkXML(this.splitType)
this.forceUpdate();
}
}
所以我不知道我在这里做错了什么。