Hi there!
I am trying to import a simple custom component inside a Main app component. I took examples from the documentation. The custom component code located in ./dummy-item.f7.jsx
is inspired from here:
const ListItem = (props) => {
return <li>{props.title}</li>;
}
export default ListItem
The main app code is in ./app.f7.jsx
:
import ListItem from './dummy-item.f7.jsx';
export default (props, {$f7, $f7ready, $on, $update }) => {
const title = 'Hello World';
// App events callback
$on('click', () => {
// callback
});
// This method need to be used only when you use Main App Component
// to make sure to call Framework7 APIs when app initialized.
$f7ready(() => {
// do stuff
console.log('Hello');
});
const openAlert = () => {
$f7.dialog.alert(title, function() {
// ok button callback
});
}
return () => (
<div id="app">
<div class="panel panel-left panel-init">
<div class="block">"Hello"</div>
</div>
<div class="view view-main view-init safe-areas">
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">{title}</div>
</div>
</div>
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a onClick={() => openAlert()}>Open Alert</a>
<a class="button button-fill" href="#" class="panel-open" data-panel=".panel-left">Left Panel</a>
</div>
</div>
<div class="page-content">
<ul>
<ListItem title="Item 1" />
<ListItem title="Item 2" />
<ListItem title="Item 3" />
</ul>
</div>
</div>
</div>
</div>
)
}
Below is what I get:
Uncaught (in promise) Error: Framework7: Component render function is not a “function” type. Didn’t you forget to “return $render”?
I am a bit confused because $render
is usually what I would use inside this code for instance, but not in JSX:
<template>
<ul>
<!-- use tag names as variables -->
<${ListItem} title="Item 1" />
<${ListItem} title="Item 2" />
<${ListItem} title="Item 3" />
</ul>
</template>
<script>
// import component
import ListItem from './dummy-item.f7';
// export main component
export default () => {
return $render;
}
</script>
My project is using webpack, Framework7 core and except that, everything works well.
Thanks in advance for your suggestions