Javascript 带有链接功能添加选项的“反应”按钮

我有一个React按钮组件，当前有一个道具，您可以在其中添加一个页面链接

这很好，但我想添加一个名为“type”的新道具，这样按钮可以链接到另一个页面（就像现在一样）， 或者执行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;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
类按钮扩展组件{
render（）{
返回(
{this.props.text}
);
}
}
导出默认按钮；

用法：

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

此按钮当前只能使用react路由器导航到另一个页面

我想选择添加一个“Type”属性，这样我就可以让按钮像现在一样导航，或者“onclick”，这样我就可以执行一个函数

---

我该怎么做？

您可以通过函数或链接传递“type”道具。然后，您可以使用三元运算符检查传递的prop是否为函数，如果为true，则调用它。只需确保在包含按钮组件的组件中绑定函数

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;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“lodash.isfunction”导入isfunction；
类按钮扩展组件{
render（）{
返回(
{isfunction（this.props.type）？this.props.type（）}/>：{this.props.text}
);
}
}
导出默认按钮；

将渲染链接组件：

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

将使用单击功能渲染按钮：

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

---

您可以通过函数或链接传递“type”道具。然后，您可以使用三元运算符检查传递的prop是否为函数，如果为true，则调用它。只需确保在包含按钮组件的组件中绑定函数

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;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“lodash.isfunction”导入isfunction；
类按钮扩展组件{
render（）{
返回(
{isfunction（this.props.type）？this.props.type（）}/>：{this.props.text}
);
}
}
导出默认按钮；

将渲染链接组件：

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

将使用单击功能渲染按钮：

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

是否还需要使用类型prop传递函数？是的，如果可能的话？是否还需要使用类型prop传递函数？是的，如果可能的话？我正在考虑使用“type”传递“type”，例如：type={link}或type={click}根据类型，使用linkto或onclick..这有意义吗？例如，对于click类型，我会这样做：或者如果type-link。。。是的，可以通过检查传递的道具是否为函数类型或添加新道具让组件知道它是哪种类型来完成。我已经更新了我的答案，您需要添加Lodash isfunction module。我正在考虑使用“type”来传递“type”，例如：type={link}或type={click}，并根据类型使用linkto或onclick..这有意义吗？例如，对于click类型，我会这样做：或者如果type-link。。。是的，可以通过检查传递的道具是否为函数类型或添加新道具让组件知道它是哪种类型来完成。我已经更新了我的答案，您需要添加Lodash isfunction module。