When I change an img in an Ons.List I get the error “DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”
<!DOCTYPE html>
<html lang="en">
<head>
<title>React</title>
<meta charset="utf-8">
<meta name="google" content="notranslate">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="bundle.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
var reactImgUrl = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K";
var items = [
{"name": "Vue", "img": null},
{"name": "React", "img": reactImgUrl}
];
function Logo(props)
{
if (props.details.img == null)
{
return null;
}
return <img src={props.details.img}/>;
}
function LogoAndSomething(props)
{
return (
<React.Fragment>
<Logo details={props.details}/>
{props.children}
</React.Fragment>
);
}
function TestList(props)
{
return props.items.map((details, index) =>
<Ons.ListItem key={details.name}>
<LogoAndSomething details={details}>
<span>{details.name}</span>
</LogoAndSomething>
</Ons.ListItem>
);
}
function App(props)
{
return (
<Ons.List>
<TestList items={props.items}/>
</Ons.List>
);
}
ReactDOM.render(
<App items={items}/>,
document.getElementById('app')
);
setTimeout(function()
{
items[0].img = items[1].img;
// DOMException happens during this call
ReactDOM.render(
<App items={items}/>,
document.getElementById('app')
);
}, 1000);
</script>
</html>
The bundle.js is just browserify of
var React = require('react');
var ReactDOM = require('react-dom');
var ons = require('onsenui');
var Ons = require('react-onsenui');
window.React = React;
window.ReactDOM = ReactDOM;
window.ons = ons;
window.Ons = Ons;
Changing from an Ons.List to a normal HTML list everything works fine.