“对象无效，不能作为React子对象使用”和linters

问题描述

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

错误：对象作为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的风格指南。但是，在我的项目的另一个分支中，这个分支没有工作，该代码可以工作。因此，我想这是与短绒棉相容的问题。这是我的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": {
    }
}

我该如何解决？有些人有主意吗？

预先感谢！

解决方法

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

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

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

,

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

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