“對象作為 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>
  );
}