Ripple-ts中使用Children组件时出现props未定义错误的技术求助

Hey there! That error is happening because of a small syntax mismatch with how Ripple expects component props to be structured. Let's break down the issue and fix it step by step.

What's Causing the Error? #

In Ripple's component syntax, all props (including children) are passed as a single object argument to your component function. Right now, you've split props into two separate parameters—your first parameter handles variant, size, and className, and you tried to grab children from a second props parameter that doesn't actually exist in the function's scope. That's why the console is yelling "props is not defined"!

Corrected Button Component Code #

Here's the fixed version of your code, with key changes highlighted:

import type { Component } from 'ripple';
import { cn } from '../utils';
import { buttonVariants } from './buttonVariant';

// All props (including children) live in the first parameter object
export component Button({ 
  variant = 'default', 
  size = 'default', 
  class: className,
  children // Move children here instead of a separate props parameter
}: { 
  variant?: 'default' | string; // You can narrow this to your actual variant types
  size?: 'default' | string;    // Same for size types
  class?: string;
  children: Component;
}) {
  <button class={cn(
    buttonVariants({ variant, size }), // No need for type casting now if you define the prop types properly
    className,
  )} >
    {children} // Use children directly from the props object
  </button>
}

Key Changes Explained: #

1. Combine all props into one parameter: We moved children into the initial destructured object, so it's part of the same props set as variant and size.
2. Update the type definition: The type annotation now covers all props, including children, so you get proper TypeScript safety without needing as 'default' casts (you can even narrow variant and size to your actual allowed values for better type checking).
3. Remove the unused second parameter: The standalone props parameter is gone—we now reference children directly from the destructured props.

This should resolve the "props is not defined" error and make your component follow Ripple's expected syntax.

内容的提问来源于stack exchange，提问作者DilshadNirmal