为什么我的componentWillRecieveProps不会在道具改变Reactjs时调用?

时间:2018-02-16 05:25:32

标签: javascript reactjs

这里,我的componentWillReceiveProps没有调用。实际上我正在做什么。我有2个组件,但我想有条件地显示我的组件。  让我们一步一步地谈谈:: =>  1.我在这里用switch来调用我的组件。

case 4 :
	return(
		<Hotspotmergepreview 
			xml = {this.state.xml} 
			remedStatus = {this.state.remediationToggle} 
			showAns = {this.showAns}
         />
	);
2.上面我调用了hotspotmergepreview组件,并使用props传递了一些数据(xml)。

这是我的组件,我根据条件调用我的两个组件。

  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}
                />	
            );
        }
    }    
}
3.我的主要组件,我使用componentwillreceiveprops接收所有数据。但是这个生命周期不能正常工作。

 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();
        }
    }
    

所以我不知道我在这里做错了什么。

0 个答案:

没有答案