extraneous non-props attributes (class)

extraneous non-props attributes (class)是指在React组件中，存在非prop属性的情况。在React中，组件的数据流是通过props来进行传递的，即父组件通过props将数据传递给子组件。props属性是只读的，只能由父组件传递给子组件，子组件不能直接修改props值。

然而，有时候我们可能会犯一些错误，把非prop属性添加到组件中。这些非prop属性可以是任何属性，例如class属性。当这些属性被添加后，它们将会与React的props属性混淆在一起，导致代码变得混乱和难以维护。

要解决这个问题，我们应该避免在组件中添加非prop属性。如果确实需要在组件中使用类似的属性，应该通过props来传递。如果需要给组件添加类名，可以使用className属性代替。例如：

function MyComponent(props) {
  return <div className={props.className}>{props.children}</div>;
}

// 使用MyComponent组件，并给其添加类名
<MyComponent className="my-class">Hello, World!</MyComponent>

在这个例子中，我们将父组件中的className通过props传递给子组件，子组件中使用className属性来添加类名，避免了使用非prop属性。

通过遵循React的props传递机制，我们可以更好地组织和管理组件的代码，使其更易于理解和维护。

相关问题

extraneous non-props attributes (class) were passed to component but could n

当在组件中传递不相关的非属性(class)时，可能会出现一些问题。组件通常通过属性接收和处理数据，但如果传递了不相关的非属性，组件可能无法正确处理这些数据或抛出错误。

一种可能的情况是，组件可能会忽略这些不相关的非属性，并只使用传递的属性。这样可能会导致组件无法获取所需的数据，从而无法正常工作。在这种情况下，我们需要确保只将相关的属性传递给组件，以避免出现问题。

另一种情况是，组件可能会抛出错误，因为它无法识别或处理不相关的非属性。这可能会导致应用程序崩溃或组件功能无法正常运行。为了避免这种情况，我们应该检查和筛选传递给组件的属性，确保只传递相关的属性。

有两种方法可以解决这个问题。首先，我们可以在组件中进行验证，以确保只接收和处理相关的属性，并忽略其他非属性。其次，作为组件的使用者，我们应该仔细检查文档或源代码，确保只传递相关的属性。在遵循这些方法的情况下，我们可以避免因为传递不相关的非属性而导致组件出现问题。

ant-design-vue ConfigProvider 会报警告 Extraneous non-props attributes (id)

这个警告是因为 `ConfigProvider` 组件不接受除了组件属性以外的任何属性。如果你在使用 `ConfigProvider` 组件时添加了一个 `id` 属性，这个警告就会出现。

解决这个问题的方法是，将 `id` 属性从 `ConfigProvider` 组件中移除，并将其添加到组件内部的元素上。例如，如果你想要给 `ConfigProvider` 组件的包裹元素添加一个 `id` 属性，你可以这样写：

<template>
  <div id="my-config-provider">
    <a-config-provider :locale="locale">
      <!-- 组件的内容 -->
    </a-config-provider>
  </div>
</template>

这样做可以让警告消失，同时保持你的代码逻辑正确。