0

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

错误：对象作为 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>
  );
}

我使用了一些短绒，我正在尝试遵循 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": {
    }
}

我该如何解决？有人有想法吗？

4

2 回答 2

2

功能组件的第一个参数应该是props哪个是对象。然后您可以从中访问孩子或其他道具

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

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

于 2020-11-12T10:54:18.070 回答
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>
  );
}
于 2020-11-12T10:54:32.873 回答