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

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

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

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

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

相关问题

Extraneous non-props attributes (draggable) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

这个警告信息意思是组件接收到了非 props 属性，但无法自动继承这些属性，因为组件渲染的是文本或者片段节点。警告信息的原因是在 React 中，只有元素的 props 属性才有特殊的含义，其他属性会被认为是 DOM 属性而不是 props 属性。因此，传递非 props 属性给组件可能会导致意外的行为。

您可以通过以下方式解决这个警告信息：

1. 确认传递给组件的属性是否都是 props 属性。如果不是 props 属性，请将它们从传递给组件的对象中删除。

2. 如果传递给组件的属性确实是 props 属性，但是警告信息仍然存在，可以尝试将这些属性包装在一个 props 对象中，然后将这个对象作为单个 props 属性传递给组件。

例如，如果您的组件是这样定义的：

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

并且您使用这个组件的方式是这样的：

<MyComponent draggable={true}>Hello World</MyComponent>

那么您可以将 `draggable` 属性包装在一个新的 `props` 对象中，然后将这个对象作为单个 `props` 属性传递给组件，例如：

<MyComponent props={{ draggable: true }}>Hello World</MyComponent>

希望这些信息能够帮助您解决问题。

控制台有个警告 Extraneous non-props attributes (on) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

这个警告是因为你在组件上传递了一个非props属性（`on`），但是组件渲染的根节点是一个文本节点或者片段节点，所以无法自动继承这个属性。

要解决这个警告，你可以尝试以下几种方法：

1. 确认是否真的需要将`on`属性传递给组件。如果不需要，可以忽略这个警告。
2. 如果确实需要将`on`属性传递给组件，并且希望组件能够使用这个属性，你可以将它定义为一个props属性，并在组件中接收和使用它。
3. 如果`on`属性是一个事件处理程序，你可以考虑使用Vue.js提供的事件监听机制来处理这个事件。例如，可以在组件内部使用`@click`指令绑定一个点击事件处理程序。

如果以上方法无法解决问题，请提供更多关于你的代码和警告信息的详细信息，以便我能够更好地帮助你解决问题。