ไม่อนุญาตให้ใช้ JSX ในไฟล์ที่มีนามสกุล ".js" กับ eslint-config-airbnb

ฉันได้ติดตั้งeslint-config-airbnbที่ควรกำหนดค่าล่วงหน้า ESLINT สำหรับ React:

การส่งออกเริ่มต้นของเราประกอบด้วยกฎ ESLint ทั้งหมดของเรารวมถึง ECMAScript 6+ และ React ต้องใช้ eslint, eslint-plugin-import, eslint-plugin-react และ eslint-plugin-jsx-a11y

การ.eslintrcขยายการกำหนดค่าของฉัน:

{ "extends": "eslint-config-airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
    "react/no-multi-comp": 0,
    "import/default": 0,
    "import/no-duplicates": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/no-unresolved": 0,
    "import/no-named-as-default": 2,
    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-console": 0,
    "no-alert": 0,
    "linebreak-style": 0
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", "src"]
    }
  },
  "globals": {
    "__DEVELOPMENT__": true,
    "__CLIENT__": true,
    "__SERVER__": true,
    "__DISABLE_SSR__": true,
    "__DEVTOOLS__": true,
    "socket": true,
    "webpackIsomorphicTools": true
  }
}

โชคไม่ดีที่ฉันได้รับข้อผิดพลาดต่อไปนี้เมื่อทำลายไฟล์. js ที่มีโค้ด React JSX อยู่ข้างใน:

 error  JSX not allowed in files with extension '.js'              react/jsx-filename-extension

ไม่ได้กำหนดค่าการตอบสนอง eslint-config-airbnb ให้รองรับ JSX แล้วตามที่ระบุไว้หรือไม่

สิ่งที่ควรทำเพื่อลบข้อผิดพลาดนั้น?

ไม่ว่าจะเปลี่ยนนามสกุลไฟล์ของคุณเพื่อ.jsxเป็นที่กล่าวถึงหรือปิดJSX ชื่อไฟล์นามสกุลกฎ คุณสามารถเพิ่มสิ่งต่อไปนี้ในการกำหนดค่าของคุณเพื่ออนุญาต.jsส่วนขยายสำหรับ JSX

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

มันทำงานสำหรับฉัน หวังว่าจะช่วยคุณ

1. ปิดใช้งาน jsx-filename-extension ใน.eslintrc:

   "กฎ": {"react / jsx-filename-extension": [0]}

2. ในwebpack.config.js:

   แก้ไข: {extensions: ['.js', '.jsx']},

โทรหาฉันหลอกถ้ามันไม่ได้ผลสำหรับคุณ

    "rules": {
        "react/jsx-filename-extension": [0],
        "import/extensions": "off"
    }

หากคุณไม่ต้องการเปลี่ยนนามสกุลไฟล์คุณสามารถส่งออกฟังก์ชันที่ส่งคืน jsx จากนั้นนำเข้าและเรียกใช้ฟังก์ชันนั้นในไฟล์ js ของคุณ

// greeter.jsx

import React from 'react';

export default name => (
  <div>
    {`Hello, ${name}!`}
  </div>
);

แล้ว

// index.js

import ReactDOM from 'react-dom';
import greeter from './components/greeter';

const main = document.getElementsByTagName('main')[0];

ReactDOM.render(greeter('World'), main);

เพื่ออธิบายคำตอบของ Martinดูเหมือนว่าจะไม่สามารถใช้JSXใน React Native ได้ในปัจจุบัน พีอาร์ที่ถูกสร้างขึ้น index.ios.jsxแต่หวนกลับเนื่องจากความกังวลเกี่ยวกับการกระจายตัวและผลกระทบของการมีที่ไม่รู้จักสิ่งที่ต้องการ ฉันไม่แน่ใจว่า AirBnb ทำงานอย่างไรกับสิ่งนี้หรือว่าเป็นอย่างไร แต่ฉันใช้rulesบล็อกเดียวกับ Martin

ต่อไปนี้เอกสารการตอบสนอง :

แต่ละองค์ประกอบ JSX เป็นเพียงน้ำตาลในการเรียกใช้ React.createElement (องค์ประกอบอุปกรณ์ประกอบฉาก ...

ทำตามคำแนะนำสไตล์ของ Airbnb :

อย่าใช้ React.createElement ถ้าคุณกำลังเริ่มต้นแอปจากไฟล์ที่ไม่ JSX

คุณสามารถทำได้:

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));