Управление дочерней коллекцией JSX-элемента
У меня есть элемент React JSX, и я хочу перебрать его дочерние элементы, выполнить замену (или любую другую операцию) для каждого строкового элемента в нем и вернуть новый измененный элемент JSX. Например:
var element = <span>Text { var1 } Text2 text3 { var2 }</span>;
var modifiedChildren = [];
element.props.children.forEach(function(child){
if (typeof child === 'string') {
var modifiedChild = child.replace('a', 'b');
modifiedChildren.push(modifiedChild);
}
}
var modifiedElement = element;
modifiedElement.props.children = modifiedChildren;
Однако element.props.children доступен только для чтения, что не позволяет мне это сделать. Но я тоже этого не хочу, я просто хочу создать новый элемент JSX с измененными дочерними элементами.
Как можно достичь этого, оставаясь при этом в образе мышления ReactJS?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать React.Children.Map для перебора дочерних элементов компонента.
React.Children.map(children, function[(thisArg)])
Что-то вроде этого:
renderChildren() {
return React.Children.map(this.props.children, child => {
React.cloneElement(child, {
newProp: this.props.name
})
})
}
Для неизменного изменения элемента, который вы можете использовать, React.cloneElement
React.cloneElement(
element,
[props],
[...children]
)
https://reactjs.org/docs/react-api.html#cloneelementhttps://reactjs.org/docs/react-api.html#reactchildren
Проверьте этот ссылка на сайт для получения дополнительной информации