React - добавление класса к дочерним компонентам

im использование реакции, и у меня есть компонент, который просто нужно отображать дочерние элементы и добавлять их в класс в соответствии с условием. Каков наилучший способ сделать это?React - добавление класса к дочерним компонентам

источник

2016-08-30 Pachu

[Это] (http://stackoverflow.com/questions/26863938/modify-attributes-of-children-in-reactjs-component) должен помочь вам. –

Я понял это неделю назад, это то, что я хотел:

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

источник

2016-09-17 17:28:52 Pachu

Я пробовал это решение, однако я получаю ошибку от функции рендеринга, «ребенок не определен». Если я перейду на анонимную функцию, вместо вызова метода класса (this.modifyChildren в вашем примере) ошибка исчезнет, и все работает нормально. Это работает как с «жирной стрелкой», так и с традиционными анонимными функциями JS. Не могу понять, почему он работает для вас, а не для меня, когда наш код почти идентичен. –

Внутри делает метод компонента:

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

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

источник

2016-08-30 12:07:52 Maggie

Я не хочу делать это в каждом из компонентов, я хочу, чтобы компонент, содержащий их, выполнял тестирование и добавлял класс, если необходимо – Pachu

Не знаете, чего именно вы пытаетесь достичь. Ваш родительский компонент может рассчитать все необходимые классы и передать их в качестве реквизита для детей. – Maggie

Вы можете пройти опору вниз к ребенку, и он может выбрать, какой класс применить (или просто передать имя класса, но это более семантическое):

В вашем ребенке оказывают:

const classes = []; 

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

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

источник

2016-08-30 12:09:48

React - добавление класса к дочерним компонентам

ответ

Смежные вопросы