Question

我正在使用switch case语句，其中我使用了两个map函数。一个地图功能用于单词，另一个用于标点符号。基本上我想用标点符号分割一个单词。在这里我面临这个问题，其中一切都很顺利，但我的组件没有渲染。在if else 我应该怎么做这个名为A和B的组件。

</div>
<script type="text/babel">
 class A extends React.Component {
    constructor(props){
      super(props);
        this.state={
        }
    }

    render(){
      return (
        <div>
         {this.props.item}hello
        </div>
      )
    }
 }
 class B extends React.Component {
    constructor(props){
      super(props);
    }
  render(){
    return(
      <div>
        {this.props.items}
      </div>
    )


  }
 }
 class C extends React.Component {
    constructor(props){
      super(props);
      self =this; 
      this.state = {
        cstate:true,
        renderdComp:''
      }
      this.switch =this.switch.bind(this)
      this.callComp =this.callComp.bind(this)
    }

callComp（项目，PUNC中，k）{ console.log（“item =＆gt;”，item，“punc =＆gt;”，punc，“k =＆gt;”，k）;

    if(punc == '') {
     this.setState({
         renderdComp : "A"
       })   
return <A item={item}/>

    } else {
         this.setState({
         renderdComp : "B"
       })
         return <B items={item}/>

    }}
switch(stateValue) {
if(stateValue) {
    let freshItem;
    let puncItem;
    ['a;','as','df','fg'].map( function(item, i) {
        [';',':','<'].map( function (punc, j) {
            const isFoundPunc = item.indexOf(punc)
            if(isFoundPunc > -1) {
                console.log(isFoundPunc)
                freshItem = item.substr(0,isFoundPunc);
                console.log(freshItem)
                puncItem = item.substr(isFoundPunc,item.length);
                console.log(puncItem)

            } else {
               freshItem = item
                console.log(freshItem+"sec")
                puncItem = ''
                 console.log(puncItem+"sec")

            }
        })
        self.callComp(freshItem, puncItem, i)
    })
}

} 渲染（）{ 返回（ {this.switch（this.state.cstate）} ） } } ReactDOM.render（，的document.getElementById（ “容器”））;

Answer 1

你可以在这个函数

中设置state

 constructor() {
     this.callComp = this.callComp.bind(this)
     }
    callComp(item,punc,k){
        console.log("item =>",item,"punc =>",punc,"k =>",k);

        if(punc == '') {
         this.setState({
             renderdComp : "A"
           })   
    return <A item={item}/>

        } else {
             this.setState({
             renderdComp : "B"
           })
             return <B items={item}/>

        }

这应该重新呈现你的组件C

如何在REACT中渲染地图函数中的多个组件？

1 个答案: