javascript - 带有 linkto 功能添加选项的 React 按钮

Question

我有一个 React Button 组件，当前有一个 prop，您可以在其中添加要链接的页面。

这工作正常，但我想添加一个名为“type”的新 Prop ，以便按钮可以链接到另一个页面(就像现在一样)，或执行 onclick 事件...例如单击时执行函数。

这是当前代码:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Button extends Component {
  render() {
    return (
      <div>
        <Link to={this.props.linkto}>{this.props.text}</Link>
      </div>
    );
  }
}

export default Button;

用法:

<Button linkto={'about'} text={'my button'} />

此按钮目前只能使用react-router导航到另一个页面。

我希望能够选择添加“类型”属性，以便我可以像现在一样使用按钮导航，或者使用“onclick”按钮来执行函数。

我该怎么做？

Answer 1

您可以通过函数或链接传递“type”属性。然后您可以使用三元运算符检查传递的 prop 是否是函数，如果为 true 则调用它。只需确保将函数绑定(bind)到包含 Button 组件的组件中即可。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import isfunction from 'lodash.isfunction';

    class Button extends Component {
      render() {
        return (
          <div>
            {isfunction(this.props.type) ? <button onClick={() => this.props.type()} /> : <Link to={this.props.linkto}>{this.props.text}</Link>}
          </div>
        );
      }
    }

    export default Button;

将渲染链接组件:

<Button linkto={'about'} text={'my button'} type={link}/>

将呈现具有点击功能的按钮:

<Button linkto={'about'} text={'my button'} type={someFuntion} />