Question

我是React的新手。我为悬停的四个按钮创建了一个代码，但是我重复了所有这些功能。我为4个按钮编写了8个函数。如何使代码更清洁？这可以吗？谢谢。

export default class SelectableOption1 extends React.Component {
  constructor() {
    super();
    this.state= {
      BtnOne: [],
      BtnTwo: [],
    }
  }
  handleHover() {
    this.setState({
      BtnOne: {
        backgroundColor: 'rgba(27, 209, 255)',
        color: '#fff'
      }
    });
  }
  handleHoverOut() {
    this.setState({
      BtnOne: {
        color: 'rgba(27, 209, 255)',
        backgroundColor: '#fff'
      }
    });
  }
  handleHoverTwo() {
    this.setState({
      BtnTwo: {
        backgroundColor: 'rgba(27, 209, 255)',
        color: '#fff'
      }
    });
  }
  handleHoverOutTwo() {
    this.setState({
      BtnTwo: {
        color: 'rgba(27, 209, 255)',
        backgroundColor: '#fff'
      }
    });
  }
  render() {
    const BtnOne = this.state.BtnOne
    const BtnTwo = this.state.BtnTwo
    return(
      <div className='wrapper-btn'>
        <div className='select-div'>
          <a style={BtnOne} onMouseOver={this.handleHover.bind(this)} 
          onMouseLeave={this.handleHoverOut.bind(this)} href='/'>Btn 1</a>
        </div>
        <div className='select-div'>
          <a style={BtnTwo} onMouseOver={this.handleHoverTwo.bind(this)} 
          onMouseLeave={this.handleHoverOutTwo.bind(this)} 
       href='/'>Btn 2</a>
        </div>
      </div>
    );
  }
}

Answer 1

所以这就是你如何减少重复

class MyButton extends React.Component {
    constructor( props ) {
        super( props );
        this.state = {
            isHovering: false
        }
        this.handleOnMouseOver = this.handleOnMouseOver.bind( this );
        this.handleOnMouseLeave = this.handleOnMouseLeave.bind( this );
    }
    handleOnMouseOver() {
        this.setState( { isHovering: true } );
    }
    handleOnMouseLeave() {
        this.setState( { isHovering: false } );
    }
    render() {
        const style = this.state.isHovering
            ? { backgroundColor: 'rgba(27, 209, 255)', color: '#fff' }
            : { color: 'rgba(27, 209, 255)', backgroundColor: '#fff' }

        return <a
            { ...this.props }
            className="MyButton"
            onMouseOver={this.handleOnMouseOver} 
            onMouseLeave={this.handleOnMouseLeave}
            style={ style } />
      }
    }
}

export default class SelectableOption1 extends React.Component {
    render() {   
        return(
      <div className='wrapper-btn'>
        <div className='select-div'>
          <MyButton href='/'>Btn 1</MyButton>
        </div>
        <div className='select-div'>
          <MyButton href='/'>Btn 2</MyButton>
        </div>
      </div>
    );
  }
}

创建具有悬停状态更改逻辑的组件
使用该组件代替之前使用的链接。

如果您将所有操作都改变了按钮的样式，那么您可以将css专门用于:hover选择器并执行

.MyButton {
    color: rgba(27, 209, 255);
    background-color: #fff;
}
.MyButton:hover {
    background-color: rgba(27, 209, 255);
    color: #fff;
}

Answer 2

重复自己并不总是坏事，但在这里你可以为你正在制作的链接（而不是按钮）创建一个可重复使用的组件。

(?:\1|\2)

然后，当链接悬停在class Link extends React.Component { constructor() { super(); this.state = { isHovered: false } } render() { const style = this.state.isHovered ? { backgroundColor: 'rgba(27, 209, 255)', color: '#fff' } : { backgroundColor: '#fff', color: 'rgba(27, 209, 255)' }; return ( <a style={style} onMouseOver={this.setState.bind(this, { isHovered: true })} onMouseLeave={this.setState.bind(this, { isHovered: false })} href={this.props.href} > {this.props.children} </a> ); } } export default class SelectableOption1 extends React.Component { render() { return( <div className="wrapper-btn"> <div className="select-div"> <Link href="/">Btn 1</Link> <Link href="/">Btn 2</Link> </div> </div> ); } }组件中时，您可以移动chaning外观的逻辑。

请注意，如果只是在链接悬停时需要更改外观，可以使用CSS实现此目的。

Link

然后，您可以从链接组件中删除大量代码。

/* CSS for Link */
.my-link {
    backgroundColor: #fff;
    color: rgba(27, 209, 255);
}
.my-link:hover {
    backgroundColor: rgba(27, 209, 255);
    color: #fff;
}

您仍然可以使用相同的方式使用链接组件：// Component for Link class Link extends React.Component { render() { return ( <a className="my-link" href={this.props.href} > {this.props.children} </a> ); } }。

Answer 3

您已经在使用.bind(this)，因此您可以将参数传递给处理程序以确定要修改的状态键：

<a style={BtnOne} 
   onMouseOver={this.handleHover.bind(this, "BtnOne")}
   onMouseLeave={this.handleHoverOut.bind(this, "BtnOne")}>

handleMouseOut(btn) {
  this.setState({
    [btn]: {
      backgroundColor: 'rgba(27, 209, 255)',
      color: '#fff'
    }
  });
}

（[btn]语法为computed property key。）

您还可以使用箭头功能替换.bind的使用：

<a style={BtnOne} 
   onMouseOver={e => this.handleHover("BtnOne")}
   onMouseLeave={e => this.handleHoverOut("BtnOne")}>

handleMouseOut = (btn) => {
  this.setState({
    [btn]: {
      backgroundColor: 'rgba(27, 209, 255)',
      color: '#fff'
    }
  });
}

您还可以将该按钮封装在一个小部件中，该部件采用name "BtnOne"或"BtnTwo"的道具并在其中实现上述内容。

用React制成的纽扣不干燥？怎么样？

3 个答案: