如何將一個js文件中定義的方法用於react項目中的另一個js文件

Question

我的問題是，我有一個 js 文件，它具有在點擊時打開標簽欄的功能。 我希望在另一個 js 文件中也可以使用打開標簽欄的相同功能，而無需在該 js 文件中再次添加方法和功能。 怎么可能做到這一點？

我在這個js文件中使用了openPane()方法，它顯示我沒有定義openPane()的錯誤。 為了定義，我必須包含所有其他相關的方法、庫，這一切都很好，這不是最好的方法。 在不定義特定文件的情況下使用整個功能的推薦方法是什么。

這是定義添加選項卡的文件https://jsfiddle.net/6719phr3/1/

所以我想在下面的代碼中單擊累積數據速率時添加一個標簽欄。

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

您可以導出多個模塊

 export default Health_status;
 export  your_function;