React - dodawanie klasy do komponentów dla dzieci

Question

im za pomocą reakcji i mam element, który po prostu musi renderować dzieci i dodać je klasy zgodnie z warunkiem. Jaki jest najlepszy sposób robienia tego?

Answer 1

wyobraziłem go tydzień temu, to co ja chciał:

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

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

    modifyChildren(child) { 
     const className = classNames(
      child.props.className, 
      {...otherClassses} 
     ); 

     const props = { 
      className 
     }; 

     return React.cloneElement(child, props); 
    } 
    render() { 
     return (<div> 
      {React.Children.map(this.props.children, this.modifyChildren(child))} 
     </div>); 
    } 
} 

Answer 2

Wewnątrz czyni metodę komponentu:

var childClasses = [], 
    childClassNames; 
if (condition) { 
    childClasses.push('my-class-name'); 
} 
childClassNames = childClasses.join(' '); 

return (<div className={childClassNames}> 
    .... (your component here) 
</div>); 

Answer 3

można przekazać rekwizyt do dziecka i może wybrać to, co klasa zastosować (lub po prostu przekazać nazwę klasy, ale to jest bardziej semantyczny):

W swoim dzieckiem render:

const classes = []; 

if (props.contentVisible) 
    classes.push('visible'); 

<div className={classes.join(' ')} />