react 中render与return 之间的变量（画红的问题）

最新推荐文章于 2025-05-17 19:46:48 发布

原创最新推荐文章于 2025-05-17 19:46:48 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#render下常量红

react 专栏收录该内容

14 篇文章

订阅专栏

本文展示了一个使用React实现的按钮尺寸动态切换示例。通过RadioGroup组件选择不同大小的按钮，包括大型、默认和小型，并展示了不同类型的按钮样式，如主要按钮、普通按钮、虚线圆形按钮及危险按钮。

这里写图片描述

 render() {
    const size = this.state.size;
    return (
      <div className={styles.main}>
        <RadioGroup value={size} onChange={this.handleSizeChange}>
          <RadioButton value="large">Large</RadioButton>
          <RadioButton value="default">Default</RadioButton>
          <RadioButton value="small">Small</RadioButton>
        </RadioGroup>
        <br />
        <br />
        <Button type="primary" size={size}>Primary</Button>
        <Button size={size}>Normal</Button>
        <Button type="dashed" shape="circle" size={size}>Dashed</Button>
        <Button type="danger" size={size} >Danger</Button>

      </div>
    );
  }

根据提示所说的要用对象的解构

 render() {
    const { size } = this.state;
    return (
      <div className={styles.main}>
        <RadioGroup value={size} onChange={this.handleSizeChange}>
          <RadioButton value="large">Large</RadioButton>
          <RadioButton value="default">Default</RadioButton>
          <RadioButton value="small">Small</RadioButton>
        </RadioGroup>
        <br />
        <br />
        <Button type="primary" size={size}>Primary</Button>
        <Button size={size}>Normal</Button>
        <Button type="dashed" shape="circle" size={size}>Dashed</Button>
        <Button type="danger" size={size} >Danger</Button>

      </div>
    );
  }