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?
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:
Then at some point I append another
RowinsideRootand I want the markup to look like this:Here's my attempt at doing this:
And when I call the
addRowmethod after Root's establishment, I get the following markup:And it seems like the two buttons that appear in the markup are different DOM nodes.
How do I achieve my goal?