Javascript 如何使用reactjs和样式化组件使组件大小发生变化

我如何通过按钮的“小”或“中”来创建变化

interface Props {
  size?: 'medium' | 'small';
}

---

如何使用此选项更改组件的大小？

这实际上取决于您使用的组件样式。例如，如果仅使用

样式

道具，则可以执行以下操作：

interface Props {
  size?: 'medium' | 'small'
}

const Component = ({ size }: Props) => {
  return <div style={{ width: size === 'medium' ? 50 : 25 }} />
};

界面道具{
尺寸？：“中等”|“小”
}
常量组件=（{size}:Props）=>{
返回
};

或者，如果您正在使用CSS，则可以使用类似的方法在类之间轻松切换：

interface Props {
  size?: 'medium' | 'small'
}

const Component = ({ size }: Props) => {
  const className = classNames({
    [styles.medium]: size === 'medium',
    [styles.small]: size === 'small',
  });

  return <div className={className} />
};

界面道具{
尺寸？：“中等”|“小”
}
常量组件=（{size}:Props）=>{
const className=类名称({
[styles.medium]：大小=='medium'，
[styles.small]：大小=='small'，
});
返回
};

您可以将大小用作一个类，并在样式表中定义每个类的大小

类组件

import './styles.css';

class YourComponent extends React.Component {
    ...

    render() {
        ...
        <div class={this.props.size ? this.props.size : null}>
            ...
        </div>
        ...
    }
}

import './styles.css';

const YourComponent = (props: Props) => {
    ...
    return (
        ...
        <div class={props.size ? props.size : null}>
            ...
        </div>
        ...
    );
}

.medium {
    width: 100px; // width for medium size
    height: 40px; // height for medium size
}

.small {
    width: 60px; // width for small size
    height: 20px; // height for small size
}