Reactjs JSX循环不渲染

我想我误解了JSX。我有一段代码：

const DgtPortal = ({children}) => {  
    console.log(children);
    return ReactDOM.createPortal(
      children,
      document.getElementById(children.props.id)
    );
  };

 render() {
    var customDgt = document.getElementsByClassName('cust-dgt');
    customDgt = Array.from(customDgt);
    var index = 1;
    var state = this.state;
    return  (
        <div>           
            <DgtPortal>               
                    <CustomDigital        
                    id={customDgt[index].id}   
                    icon={customDgt[index].getAttribute('data-icon')}
                    value={state.data[customDgt[index].getAttribute('data-bind')][customDgt[index].getAttribute('data-address')]}
                    />
            </DgtPortal>

            {customDgt.map(function(dgt, index){                
                <div>{console.log("child id = " + customDgt[index].id)}
                <DgtPortal>
                    <CustomDigital        
                    id={customDgt[index].id}   
                    icon={customDgt[index].getAttribute('data-icon')}
                    value={state.data[customDgt[index].getAttribute('data-bind')][customDgt[index].getAttribute('data-address')]}
                    />
                </DgtPortal></div>
                })                
            }

    </div>
    );
}

constdgtportal=（{children}）=>{
console.log（儿童）；
返回ReactDOM.createPortal(
儿童
document.getElementById（children.props.id）
);
};
render（）{
var customDgt=document.getElementsByClassName（'cust-dgt'）；
customDgt=Array.from（customDgt）；
var指数=1；
var state=this.state；
返回(
{customDgt.map（函数（dgt，索引）{
{console.log（“child id=“+customDgt[index].id）}
})                
}
);
}

循环中的DgtPortal不会渲染任何内容 而外面的那个正在渲染 我确信循环的执行是因为日志。。。

---

我哪里做错了？

您需要显式地

返回
您的
jsx

        {customDgt.map(function(dgt, index){                
            return(<div>{console.log("child id = " + customDgt[index].id)}
            <DgtPortal>
                <CustomDigital        
                id={customDgt[index].id}   
                icon={customDgt[index].getAttribute('data-icon')}
                value={state.data[customDgt[index].getAttribute('data-bind')][customDgt[index].getAttribute('data-address')]}
                />
            </DgtPortal></div>)
            })                
        }

{customDgt.map（函数（dgt，索引）{
返回（{console.log（“child id=“+customDgt[index].id）}
)
})                
}