“对象作为 React 子对象无效”和短绒

Question

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

错误：对象作为 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": {
    }
}

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

提前致谢！

Answer 1

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

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

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

Answer 2

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

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