我正在嘗試為孩子們配置一些道具。在這個(gè)虛擬示例中，我正在測(cè)試該函數(shù)，以便使用以下屬性專門針對(duì)任何嵌套或未嵌套的子對(duì)象：swipeMe。div如果在 my on the里面render function它只包含一個(gè)孩子，它工作得很好，就像這樣：? ? <SwapableItems>? ? ? <div>? ? ? ? {/*the p element will get the red color as defined on childrenHandler*/}? ? ? ? <p swipeMe>Add Props</p>?? ? ? </div>? ? </SwapableItems>然而，如果我在我的中添加更多的孩子div，不知何故我猜我的三元操作childrenHandler效果不佳，我不知道為什么......如果它有孩子，克隆這個(gè)元素并調(diào)用childrenHandler傳遞它的孩子。如果它有我想要的道具，克隆元素并用它做點(diǎn)什么。如果以上都不是，則只需克隆該元素。return?childHasChildren ????????React.cloneElement(child,?{},?childHasChildren) ??????:?child.props.swipeMe ????????React.cloneElement(child,?{?...swipeMeProps?}) ??????:?React.cloneElement(child,?{});下面是完整的腳本。import React from "react";import ReactDOM from "react-dom";function App() {? return (? ? <SwapableItems>? ? ? <div>? ? ? ? <p swipeMe>Add Props</p>? ? ? ? <div>Don't Add Props</div>? ? ? </div>? ? </SwapableItems>? );}function SwapableItems({ children }) {? const content = childrenHandler(children, { style: { color: "red" } });? return content;}const childrenHandler = (children, swipeMeProps) => {? const childEls = React.Children.toArray(children).map((child) => {? ? const childHasChildren =? ? ? child.props.children && React.isValidElement(child.props.children)? ? ? ? ? childrenHandler(child.props.children, swipeMeProps)? ? ? ? : undefined;? ? return childHasChildren? ? ? ? React.cloneElement(child, {}, childHasChildren)? ? ? : child.props.swipeMe? ? ? ? React.cloneElement(child, { ...swipeMeProps })? ? ? : React.cloneElement(child, {});? });? return childEls;};const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);