“对象作为 React 子项无效”和 linter答案

【问题标题】："Objects are not valid as a React child" and linters“对象作为 React 子项无效”和 linter
【发布时间】：2021-02-24 08:48:35
【问题描述】：

我有一个关于一个简单组件的问题，我不知道为什么。这是我的错误和代码：

错误：对象作为 React 子级无效（找到：带有键 {Cfor, children} 的对象）。如果您打算渲染一组子项，请改用数组。

import React from 'react';
import './Label.css';

export default function Label(Childn, Cfor) {
  return (
    <label className="label mr-10" htmlFor={Cfor}>
      {Childn}
    </label>
  );
}

我使用了一些 linter，并且正在尝试遵循 airbnb 的样式指南。但是在我的项目的另一个没有 linter 的分支中，这段代码可以工作。所以我想这是与 linter 的兼容性问题。这是我的 devDependencies 和我的 .eslintrc.json

  "devDependencies": {
    "eslint": "^7.13.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "stylelint": "^13.7.2",
    "stylelint-config-standard": "^20.0.0"
  }

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "airbnb",
        "airbnb/hooks"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

我该如何解决这个问题？有人有想法吗？

【问题讨论】：

嘿比利，你需要像这样解构密钥：Label({ Childn, Cfor })
@YashJoshi 感谢您的回答！它正在工作！

标签： javascript reactjs eslint eslint-config-airbnb airbnb-js-styleguide

【解决方案1】：

import React from 'react';
import './Label.css';

export default function Label({Childn, Cfor}) { // <--- attention
  return (
    <label className="label mr-10" htmlFor={Cfor}>
      {Childn}
    </label>
  );
}

【讨论】：

感谢您的回答！我确实可以解构。但我对我的一个道具有疑问，Childn。我不能使用这个名字，我必须使用“孩子”。我不明白为什么。我的意思是没关系，只是一个节点吧？

【解决方案2】：

功能组件的第一个参数应该是props，它是一个对象。然后你从它访问孩子或其他道具

export default function Label(props) {
  const { children, Cfor } = props;
  return (
    <label className="label mr-10" htmlFor={Cfor}>
      {children}
    </label>
  );
}

此外，您不能直接渲染对象。相反，您可以渲染JSON.stringify(object)

【讨论】：