警告:为非布尔值属性"jsx"收到"true".Zeit风格的Jsx [英] Warning: Received `true` for a non-boolean attribute `jsx`. Zeit Styled Jsx

问题描述

我正在尝试将styled-jsx与一些代码一起使用.但是，无论我做什么，我似乎都会出错

I am trying to use styled-jsx with some code. However, no matter what I do, I seem to get an error

index.js:1437 Warning: Received `true` for a non-boolean attribute `jsx`.

If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.
    in style (at App.js:12)
    in div (at App.js:9)
    in Test (created by Route)
    in Route (at App.js:29)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:27)
    in App (at src/index.js:7)

我尝试重新安装node_modules，确保我的配置正常，并测试了不同的版本.

I have tried reinstalling node_modules, made sure my configuration is all good, and tested different versions.

我的package.json，

My package.json,

{
  "name": "preview",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "contentful": "^7.4.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.4",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.1",
    "socket.io-client": "^2.2.0",
    "styled-jsx": "^3.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "babel": {
    "presets": [
      "@babel/preset-stage-2"
    ],
    "plugins": [
      "styled-jsx/babel"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:5000/"
}

我的示例React代码仍然抛出错误.

My sample React code that still throws the error.

const Test = () => {
    return (
        <div>
        <p>test
        </p>
        <style jsx>{
            `
            p {
                color: red;
            }
            `
        }
        </style>
        </div>)
}

class App extends Component {

  render () {
    return (
      <Router>

        <Route path='/test' component={Test}/>

      </Router>

    )
  }

}

export default App;

根据文档，我希望没有任何错误消息

I expect to not have any error messages based on the documentation

推荐答案

确定.由于我本人花了几个小时才解决此问题，所以希望我能为同样有此问题的人们提供帮助.

OK. Since I myself spent a few hours before solving this, I hope I can help you guys who also have this problem.

要将styled-jsx与create-react-app一起使用，您需要:

To use styled-jsx with create-react-app, you need:

1. 纱线添加react-app-rewired custom-cra
2. 替换为package.json

    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",

使用

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",

1. 创建(在根目录中， package.json 旁边)文件 config-overrides.js

1. create (in root directory, next to package.json) file config-overrides.js

{ override, addBabelPlugin, addBabelPreset } = require('customize-cra');
module.exports = override(
    addBabelPlugin('styled-jsx/babel')
);

1. 在根目录文件中创建 .babelrc (仅在运行 jest test 时使用)

1. create in root directory file .babelrc (it is only used when you run jest test)

{
    "plugins": ["styled-jsx/babel"]
}

1. 在您的 index.js 中(或将React装入DOM的位置)，在调用ReactDOM.render(....)之前，插入以下代码，取自 https://github.com/vercel/styled-jsx/issues/560#issuecomment-599371026

1. in your index.js (or where it is you mount React into DOM), before calling ReactDOM.render(....), insert the following bit of code, taken from https://github.com/vercel/styled-jsx/issues/560#issuecomment-599371026

const _JSXStyle = require('styled-jsx/style').default;
if (typeof global !== 'undefined') {
    Object.assign(global, { _JSXStyle });
}

这是不幸的，但是没有它，这种复杂的配置会有些变幻.

It is unfortunate, but this complex configuration is a bit fickle without it.

仅当将 yarn build 或 yarn test 与create-react-app一起使用时，才需要执行步骤4和5.

You need steps 4 and 5 only if you use yarn build or yarn test with create-react-app.

这篇关于警告:为非布尔值属性"jsx"收到"true".Zeit风格的Jsx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！