Question

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

这很好但我想添加一个名为＆＃39; type＆＃39;所以按钮可以链接到另一个页面（就像现在一样），或执行onclick事件...例如，单击时执行一个函数。

这是当前的代码：

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

用法：

{{1}}

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

我想要选择添加＆＃39; Type＆＃39;属性，以便我可以像现在一样使用按钮导航或 onclick ＆＃39;所以我可以执行一个函数。

我该怎么做？

Answer 1

您可以使用函数或链接传递'type'prop。然后你可以用三元运算符检查传递的prop是否是函数，如果为true则调用它。只需确保将函数绑定到包含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} />

带有linkto功能的React Button添加选项

1 个答案: