Ich benutze reagieren und ich habe eine Komponente, die einfach die Kinder rendern und fügen Sie ihnen eine Klasse nach einer Bedingung. Was ist der beste Weg, es zu tun?React - Hinzufügen von Klasse zu Kinder-Komponenten
ich es dachte, vor einer Woche, ist dies, was ich wollte:
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>);
}
}
Ich habe diese Lösung versucht, jedoch bekomme ich einen Fehler von der Renderfunktion, "Kind ist nicht definiert." Wenn ich dort zu einer anonymen Funktion wechsle, anstatt eine Klassenmethode aufzurufen (this.modifyChildren in Ihrem Beispiel), verschwindet der Fehler und alles funktioniert einwandfrei. Dies funktioniert sowohl mit "fettem Pfeil" als auch mit traditionellen anonymen JS-Funktionen. Ich kann nicht herausfinden, warum es für dich funktioniert und nicht für mich, wenn unser Code fast identisch ist. –
Innere Methode Ihrer Komponente machen:
var childClasses = [],
childClassNames;
if (condition) {
childClasses.push('my-class-name');
}
childClassNames = childClasses.join(' ');
return (<div className={childClassNames}>
.... (your component here)
</div>);
Ich möchte es nicht in jeder der Komponenten tun, ich möchte die Komponente, die sie enthält, die Tests durchführen und die Klasse hinzufügen, falls erforderlich – Pachu
Nicht sicher, was genau Sie versuchen zu erreichen. Ihre Elternkomponente kann alle erforderlichen Klassen berechnen und sie als Requisiten an die Kinder weitergeben. – Maggie
Sie eine Stütze nach unten auf das Kind passieren kann und es kann wählen, welche Klasse anwenden (oder nur die Klassennamen übergeben, aber das ist mehr semantisches):
In Ihrem Kind machen:
const classes = [];
if (props.contentVisible)
classes.push('visible');
<div className={classes.join(' ')} />
[Dies] (http://stackoverflow.com/questions/26863938/modify-attributes-of-children-in-reactjs-component) sollten Ihnen helfen. –