如何在REACT中的map函数内部渲染多个组件？

Question

我正在使用switch case语句，其中我正在使用两个map函数。 一种映射功能用于单词，另一种用于标点符号。 基本上我想用标点符号分割单词。 在这里，我遇到的问题是一切正常，但我的组件未渲染。 在其他情况下，我该怎么称呼这个名称为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（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}/>

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

} render（）{return（{this.switch（this.state.cstate）}）}} ReactDOM.render（，document.getElementById（“ container”））;

Answer 1

您可以在此功能中设置setState

 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