[英]React.cloneElement not appending className
我如何 append 或使用 React.cloneElement 更改 className 屬性?
當我使用 React.cloneElement 時,我無法更改或 append className 道具。 我已經搜索了幾個小時,但我什么也沒找到。 React.Children.only 或刪除傳播不會改變行為。 它似乎是一個錯誤,還是一個性能優化功能?
期待 html: <div class="parent"><div class="child other-class">testing...</div></div>
結果 html: <div class="parent"><div class="child">testing...</div></div>
Class 示例:
class Parent extends React.Component {
render() {
return (
<div className={"parent"}>
{React.cloneElement(React.Children.only(this.props.children), {
...this.props.children.props,
className: `${this.props.children.props.className} other-class`,
})}
</div>
);
}
}
class Child extends React.Component {
render() {
return <div className={"child"}>{"testing..."}</div>;
}
}
功能組件示例:
const Parent = ({ children }) => (
<div className={"parent"}>
{React.cloneElement(React.Children.only(children), {
...children.props,
className: `${children.props.className} other-class`,
})}
</div>
);
const Child = () => <div className={"child"}>{"testing..."}</div>;
const Parent = ({ children }) => ( <div className={"parent"}> {React.cloneElement(React.Children.only(children), {...children.props, className: `${children.props.className} other-class`, })} </div> ); const Child = () => <div className={"child"}>{"testing2..."}</div>; ReactDOM.render( <React.StrictMode> <Parent> <Child /> </Parent> </React.StrictMode>, document.getElementById("root") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
問題是您從未在Child
中使用className
,而這正是您在Parent
中操作的。 Child
將className
放在div
上,但這不是Child
的className
,它只是Child
放在div
上的硬編碼。
如果您希望Child
將 class 放在div
上,您必須編寫代碼來執行此操作。 此外,您不需要傳播,道具是合並的。 最后,為了獲得原始的className
,我將使用調用Children.only
的結果,而不是返回this.props.children
(盡管這會起作用,因為only
在不只有一個時才會拋出)。
看評論:
class Parent extends React.Component { render() { // Get the `className` from the child after verifying there's only one const child = React.Children.only(this.props.children); const className = `${child.props.className} other-class`; return ( <div className={"parent"}> {React.cloneElement(child, { // No need to spread previous props here className, })} </div> ); } } class Child extends React.Component { render() { // Use `className` from `Child`'s props const className = (this.props.className || "") + " child"; return <div className={className}>{"testing..."}</div>; } } // Note the `classname` on `Child`, to show that your code using // `this.props.children.props.className` ReactDOM.render(<Parent><Child className="original"/></Parent>, document.getElementById("root"));
.child { color: red; }.child.other-class { color: green; }.original { font-style: italic; }
<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.