Phản ứng - thêm lớp học cho các thành phần con

Question

im sử dụng phản ứng và tôi có một thành phần chỉ đơn giản là cần hiển thị các con và thêm chúng vào một lớp theo điều kiện. Whats cách tốt nhất để làm điều đó?

Answer 1

I figured it out một tuần trước đây, đây là những gì tôi muốn:

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

Bên trong làm cho phương pháp thành phần của bạn:

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

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

Answer 3

Bạn có thể vượt qua một prop xuống cho đứa trẻ và nó có thể chọn những gì lớp để áp dụng (hoặc chỉ cần vượt qua tên lớp nhưng đây là ngữ nghĩa hơn):

Trong con bạn render:

const classes = []; 

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

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