This repository was archived by the owner on Dec 15, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 40
This repository was archived by the owner on Dec 15, 2022. It is now read-only.
How to move an Etch component's child? #69
Copy link
Copy link
Open
Description
Consider the following scenario:
I have a root component that holds some rows. I also have a button that should be a child of the latest row at all times.
On the root component creation it holds a single row which in turn holds the button, so the inital markup looks like this:
<Root>
<Row ref="row0">
<Button ref="btn" />
</Row>
</Root>Then at some point I append another Row inside Root and I want the markup to look like this:
<Root>
<Row ref="row0"></Row>
<Row ref="row1">
<Button ref="btn" /> // this should point to the same DOM node as the previous Button
</Row>
</Root>Here's my attempt at doing this:
class Button {
constructor() {
etch.initialize(this);
}
render() {
return (
<button>Test</button>
);
}
update() {
return etch.update(this);
}
}
class Row {
constructor(props, children) {
this.children = children;
etch.initialize(this);
}
render() {
return (
<div>
{this.children}
</div>
);
}
update() {
return etch.update(this);
}
}
export default class Root {
constructor() {
this.otherRows = [];
this.rowCount = 1;
etch.initialize(this);
}
render() {
return (
<div>
<Row ref="row0">
<Button ref="btn" />
</Row>
{this.otherRows}
</div>
);
}
addRow() {
const lastRow = this.refs[`row${this.rowCount - 1}`];
const button = lastRow.children.pop();
const newRow = new Row({}, [button]);
this.otherRows.push(newRow);
this.update();
this.rowCount++;
}
update() {
return etch.update(this);
}
}And when I call the addRow method after Root's establishment, I get the following markup:
<div> // This is the Root
<div> // This is a Row
<button />
</div>
<undefined>
<button />
</undefined>
</div>And it seems like the two buttons that appear in the markup are different DOM nodes.
How do I achieve my goal?
Metadata
Metadata
Assignees
Labels
No labels