如何将一个js文件中定义的方法用于react项目中的另一个js文件

Question

My problem is, I have a js file having a functionality of opening a tab-bar on clicking. I want the same feature of opening a tab-bar to be used in the other js file as well without adding the methods and functionalities again in that js file. How could this be done?

I have used the method openPane() in this js file, it shows the error that I haven't defined the openPane(). In order to define I have to include all the other related methods, libraries to this all well, which is not the best way. What would be the recommended way of using entire functionality without defining in the particular file.

This is the file where the adding tab is being defined https://jsfiddle.net/6719phr3/1/

So I want to add a tabbar on clicking Cumulative Data Rate in the below give code.

import React, { useState,useCallback } from "react";
import {Card,CardGroup,Badge} from 'react-bootstrap';
 
const Health_status = (props) => {
 return (
<CardGroup>
  <Card className="cards">
    
    <Card.Body>
      <Card.Title>Cluster-1 [ID]</Card.Title>
      <Card.Text>
      
      </Card.Text>
    </Card.Body>
    
      <Card border="secondary" style={{ width: '18rem' }} className ="sub-cards-rec">
      <Card.Header>Recording Unit [ID]</Card.Header>
      <Card.Body>
        <Card.Title>[ID]</Card.Title>
        <Card.Text>
          <h6 onClick{()=>openPane()}><Badge pill bg="primary" >Cumulative Data Rate:{}</Badge></h6>
          
        {css ? (<h6 onClick={toggle2}><Badge pill bg="success" >Cumulative Sensor Status:{}</Badge></h6>)
          :(<h6 onClick={toggle2}><Badge pill bg="danger" >Cumulative Sensor Status:{}</Badge></h6>)
          }
        </Card.Text>
      </Card.Body>
      </Card><br />
      <Card border="secondary" style={{ width: '18rem' }} className ="sub-cards-ana">
      <Card.Header>Analysis Unit [ID]</Card.Header>
      <Card.Body>
        <Card.Title>[ID]</Card.Title>
        <Card.Text>
        <h6><Badge pill bg="warning" >Instance-Number:{}</Badge></h6>
        </Card.Text>
      </Card.Body>
      </Card><br />
  </Card>
  </CardGroup>

  }
  export default Health_status;

Answer 1

You can export multiple module

 export default Health_status;
 export  your_function;