Question

试图弄清楚Ink库以使用Javascript构建控制台应用程序，并且我之前使用过React，但这不是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.log(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]从node cli.js开始   /用户/ cjrutherford /其他/ninkcli/node_modules/ink/lib/h.js:8                   抛出新的TypeError（Expected component to be a function, but received ${typeof component}. You may have forgotten to export a component.）;                   ^

TypeError：预期组件是一个函数，但已接收对象。   您可能忘记了导出组件。       在h（/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/h.js:8:9）       在RepositoryList.render（/Users/cjrutherford/other/ninkcli/components/repository-list.js:32:13）       在RepositoryList._render（/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/component.js:54:15）       挂载时（/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:36:35）       在差异（/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:136:3）       在差异（/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:163:21）       在差异（/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:163:21）       在构建时（/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/renderer.js:10:9）       在Renderer.update（/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/renderer.js:25:20）       在export.render（/Users/cjrutherford/other/ninkcli/node_modules/ink/index.js:61:14）   [nodemon]应用程序崩溃-等待文件更改，然后再开始...

要使组件正确呈现，我缺少什么？

Answer 1

事实证明，必须使用es6导入该组件：

import Table from 'ink-table';

语法或

const Table = require('ink-table').default;

Issue on Github for Ink-Table

墨水CLI预期组件将起作用

1 个答案: