反應按鈕與鏈接功能添加選項

Question

我有一個反應按鈕組件，它目前有一個道具，你添加一個頁面鏈接。

這工作正常，但我想添加一個名爲'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; 

用法：

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

此按鈕將當前使用的反應，路由器只導航到另一個頁面。

我想不得不添加一個'Type'屬性，以便我可以讓按鈕像現在一樣導航或'onclick'，這樣我就可以執行一個功能。

我該怎麼做？

Answer 1

您可以通過函數或鏈接傳遞'type'道具。然後你可以用三元運算符來檢查傳遞的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}/> 

將與渲染上點擊funtion按鈕：

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