wordpress WP.scripts React typescript类中出现意外标记

gr8qqesn  于 2023-01-08  发布在  WordPress
关注(0)|答案(1)|浏览(159)

我得到意外的令牌错误,而建立React应用程序(wordpress-scrips)。
我的代码:

class PropductPriceTableLine extends Component {

    public listProps = [
        {
            propductid: 420,
            name: "stamp",
            displayName: "stamp"
        },
        {
            propductid: 421,
            name: "stamp1",
            displayName: "stamp1"
        },
    ];

    static defaultProps = {
        class: "line-price", // line-border
        extClass: ""
    };

    protected listItems = this.listProps.map((prop) =>
        <PropductPriceTableLineItem {...prop}/>
    );
    render() {return (...)}
}

明细错误

ERROR in ./src/PriceList.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ./src/PriceList.tsx: Unexpected token (144:11)

  142 | class PropductPriceTableLine extends Component {
  143 |
> 144 |     public listProps = [
      |            ^
  145 |         {
  146 |             propductid: 420,

我不明白这个错误。类的这个属性没有先前的属性和其他标记。我尝试在static/protected/private上更改它-没有任何更改。
你能帮我吗?
我有类似的代码,它叉罚款(函数是在同一个文件中定义-PriceList. tsx):

function PriceList(props) {

    const listProps = [
        {id: "stamp-1", title:{name: "stamps1", href: "#stamps1", id:"title-nav-carousel1"}},
        {id: "stamp-2", title:{name: "stamps2", href: "#stamps2", id:"title-nav-carousel2"}},
        {id: "stamp-3", title:{name: "stamps3", href: "#stamps3", id:"title-nav-carousel3"}},
        {id: "stamp-4", title:{name: "stamps4", href: "#stamps4", id:"title-nav-carousel4"}},
    ]
    const listItems = listProps.map((props) =>
        <HeaderBlock {...props}/>
    );
    return (...);
}

我的网页包. config. js:

const defaults = require("@wordpress/scripts/config/webpack.config");

module.exports = {
    ...defaults,
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

package.json

{
...
  "main": "src/index.tsx",
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:js:src": "wp-scripts lint-js ./src",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "devDependencies": {
    "@wordpress/scripts": "^25.1.0"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "jquery": "^3.6.3",
    "popper": "^1.0.1",
    "popper.js": "^1.16.1",
    "react-bootstrap": "^2.7.0",
    "wow": "^0.0.6"
  },
...
}
os8fio9y

os8fio9y1#

我删除公共和保护和所有工作罚款

listProps = [
        {
            propductid: 420,
            name: "stamp",
            displayName: "stamp"
        },
        {
            propductid: 421,
            name: "stamp1",
            displayName: "stamp1"
        },
    ];

...

    listItems = this.listProps.map((prop) =>
        <PropductPriceTableLineItem {...prop}/>
    );

相关问题