Вы закрываете подпорки фигурной скобой раньше. Кроме того, передайте onClick функцию вместо вызова там предупреждения, которое будет выполняться сразу после монтирования компонента.
const clone = React.cloneElement(<BallComponent>, {
key: new Date().getTime()
onClick: () => { alert('test') }
});
Это минимальный пример для использования React.cloneElement
.
import React from "react";
import ReactDOM from "react-dom";
class Demo extends React.Component {
render() {
return <p onClick={this.props.click}>This is Demo. Click me.</p>;
}
}
function App() {
const clone = React.cloneElement(<Demo />, {
click: () => {
alert("You clicked Demo :)");
}
});
return (
<div className="App">
{clone}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Используйте виртуализацию
<ListView ItemsSource="{BindingNames}"Name="lv">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<!--<StackPanel/>
If StackPanel was used, the memory consumed was over 2GB and dead slow.
-->
<VirtualizingStackPanel>
<!--Memory footprint is only 200 mb-->
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Можно также хотеть проверить эту превосходную статью о Проекте Кода:
WPF: виртуализация данных Paul McClean http://www.codeproject.com/KB/WPF/WpfDataVirtualization.aspx
Это показывает Вам намного лучший подход в минимальной памяти и использование пропускной способности.