Пытаюсь разобраться в библиотеке Ink для создания консольного приложения с Javascript, и раньше я использовал React, но это не реагирует. Некоторые причуды немного сбивают с толку.
У меня есть приложение, работающее с двумя очень простыми компонентами, и я начал работать над более глубоким компонентом. Первые два просто запускают команду терминала для проверки версии, и они работают нормально. Я хочу перечислить в таблице список папок в определенной папке.
Вот мой Ui.js
'use strict';
const {h, Component, Color} = require('ink');
const importJsx = require('import-jsx');
const PropTypes = require('prop-types');
const ChildProcess = require('child_process');
const DockerCheck = importJsx('./components/docker-check');
const GitCheck = importJsx('./components/git-check');
const RepositoryList = importJsx('./components/repository-list');
class UI extends Component {
render() {
return (
<div>
<DockerCheck></DockerCheck>
<GitCheck></GitCheck>
<RepositoryList repoFolder='~/repoFolder' ></RepositoryList>
</div>
);
}
}
module.exports = UI;
и ошибка исходит от компонента RepositoryList, который находится здесь:
'use strict';
const {h, Component, Color} = require('ink');
const fs = require('fs');
const PropTypes = require('prop-types');
const Table = require('ink-table');
class RepositoryList extends Component{
constructor(props){
super(props);
this.state = {
repos: []
};
}
componentDidMount(){
fs.readdir(this.props.repoFolder, (e, f) => {
if (e){
console.info(e);
}else{
this.setState({repos: f});
}
})
}
render(){
let {repos} = this.state;
return(
<div><Table data = {repos}></Table></div>
);
}
}
RepositoryList.propTypes = {
repoFolder: PropTypes.string
}
module.exports = RepositoryList;
и ошибка, которую я получаю, здесь:
[nodemon] starting
node cli.js/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/h.js:8 throw new TypeError(Expected component to be a function, but received ${typeof component}. You may have forgotten to export a component.); ^TypeError: Expected component to be a function, but received object. You may have forgotten to export a component. at h (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/h.js:8:9) at RepositoryList.render (/Users/cjrutherford/other/ninkcli/components/repository-list.js:32:13) at RepositoryList._render (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/component.js:54:15) at mount (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:36:35) at diff (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:136:3) at diff (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:163:21) at diff (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:163:21) at build (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/renderer.js:10:9) at Renderer.update (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/renderer.js:25:20) at exports.render (/Users/cjrutherford/other/ninkcli/node_modules/ink/index.js:61:14) [nodemon] app crashed - waiting for file changes before starting...
Что мне не хватает для правильного рендеринга компонента?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Оказывается, этот компонент нужно либо импортировать с помощью es6:
import Table from 'ink-table';
синтаксис или
const Table = require('ink-table').default;