You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.1 KiB
62 lines
1.1 KiB
3 years ago
|
## cloneElement
|
||
|
|
||
|
You'll sometimes use React's `cloneElement` to provide additonal attributes to a child component - i.e, to add an event handler, className, etc. You can achieve similar behaviour in SwiftUI.
|
||
|
|
||
|
### React
|
||
|
|
||
|
```jsx
|
||
|
import React from "react";
|
||
|
|
||
|
export function PageElement() {
|
||
|
return (
|
||
|
<div>
|
||
|
<LayoutElement>
|
||
|
<span>This is the page content</span>
|
||
|
</LayoutElement>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export function LayoutElement({ children }) {
|
||
|
return (
|
||
|
<div>
|
||
|
<span>This is the layout</span>
|
||
|
{React.cloneElement(children, {
|
||
|
style: {
|
||
|
fontWeight: "bold",
|
||
|
fontSize: "2rem"
|
||
|
}
|
||
|
})}
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
```
|
||
|
|
||
|
### Swift
|
||
|
|
||
|
```swift
|
||
|
import SwiftUI
|
||
|
|
||
|
struct PageElement : View {
|
||
|
var body: some View {
|
||
|
LayoutElement() {
|
||
|
Text("This is the page content")
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
struct LayoutElement : View {
|
||
|
|
||
|
var content: () -> Text
|
||
|
|
||
|
var body: some View {
|
||
|
VStack {
|
||
|
Text("This is the layout")
|
||
|
content()
|
||
|
.bold()
|
||
|
.font(.largeTitle)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
```
|