内部コンポーネントが正しくレンダリングされない

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として、したがって、あなたはどうなる。これは例外TypeErrorが `というエラーがスローされます

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