내부 구성 요소가 올바르게 렌더링되지 않습니다.

Question

반응에 사용자 지정 구성 요소를 만들었습니다. 다음은 해당 구성 요소의 코드입니다.

import React from 'react'; 
import PropTypes from 'prop-types'; 
import classNames from 'classnames'; 
import Avatar from '../Avatar'; 

const propTypes = { 
    classes: PropTypes.object, 
    backgroundColor: PropTypes.string, 
    labelText: PropTypes.string, 
    onClick: PropTypes.func, 
    avatarProp: PropTypes.instanceOf(Avatar) 
} 

export default class Chip extends React.Component { 
    constructor(props){ 
     super(props); 

     this.onClick = this.onClick.bind(this); 
    } 

    onClick(e) { 
     if (this.props.disabled) { 
      e.preventDefault(); 
      return; 
     } 

     if (this.props.onClick) { 
      this.props.onClick(e); 
     } 
    } 

    render(){ 

     let { 
      classes, 
      avatar: avatarProp, 
      backgroundColor, 
      labelText, 
      onClick, 
     } = this.props; 

     let avatar = null; 
     if (avatarProp && React.isValidElement(avatarProp)) { 
      avatar = React.cloneElement(
      avatarProp, 
      { 
       className: classNames(classes.avatar, avatarProp.props.className), 
       childrenClassName: classNames(classes.avatarChildren, avatarProp.props.childrenClassName), 
      }); 
     } 

     console.log(avatarProp); 

     let defaultClasses = 'chips chips-rounded'; 

     return (
      <div className={classNames(classes, defaultClasses)} onClick={ this.onClick }> 
       {avatar} 
       <span>{this.props.labelText}</span> 
      </div> 
     ) 
    } 

} 

Chip.propTypes = propTypes; 

생성 된 구성 요소를 사용하기 위해 다음 코드를 사용했습니다.

<Chip labelText="This is a sample chip" onClick={function(){console.log('This is a sample click event')}}> 
    <Avatar backgroundColor="#333" size="100" /> 
</Chip> 

그러나 렌더링 된 구성 요소를 검사하면 내부 구성 요소가 렌더링되지 않습니다. 내가 콘솔 출력을 사용하여 확인하고 그것은 정의되지 반환합니다. 여기서 내가 뭘 잘못하고 있니?

Answer 1

아바타는 Chip 구성 요소에 children 소품을 통과하지 avatar 같은 따라서 당신이 할 것입니다있는이 형식 오류는`말에서 오류가 발생

render(){ 

    let { 
     classes, 
     backgroundColor, 
     labelText, 
     onClick, 
     children 
    } = this.props; 

    let avatar = null; 
    if (children && React.isValidElement(children)) { 
     avatar = React.cloneElement(
     children, 
     { 
      className: classNames(classes.avatar), 
      childrenClassName: classNames(classes.avatarChildren), 
     }); 
    } 


    let defaultClasses = 'chips chips-rounded'; 

    return (
     <div className={classNames(classes, defaultClasses)} onClick={ this.onClick }> 
      {avatar} 
      <span>{this.props.labelText}</span> 
     </div> 
    ) 
}