如何将 react.js 文件的 HTML 部分用于另一个 react.js 文件

Question

我正在尝试将一个单独的 react.js 文件的内容用于另一个 react.js 文件。 js 文件包含一个下拉菜单和我想根据条件显示的下拉菜单。下面是包含下拉菜单的 js 文件

const MyDataTableHeader = ({

first =0,
pageSize=0,
totalElements=0,
exportFile,
})

 ....

return(
<div className="someCss">
<Dropdown style={{width:100%, textAlign : "center"}}
value={selectedFileFormat}
options = {downloadOptions}
placeholder="Export As"
id={DOWNLOAD_OPTION}
name={DOWNLOAD_OPTION}
onChange={(e) => {
setSelectedFileFormat(e.value);  
}}
/>
</div>
<div  style={{padding:"1em"}} className = "someCss1">
<Button type="button" icon = "pi pi-download" iconPos="left" onClick={exportHandler}
/>

这部分代码显示下拉菜单和导出选项，我想在另一个 js 文件中使用此代码块，下面是 js 文件的内容

const MySearchPanel = ({onSearch,onClear,exportFile }) => 
const searchHandler = () => {
  if(//some Condition){
   // i want to show  the Drop down with export option here

Answer 1

您想将下拉列表导出为一个组件，然后在您的条件内的其他文件中，您只需使用 JSX 渲染它。

   import Dropdown from "../from/another/file" // const DropDown = require('from another file') if you do not wish to use module syntax.
   const MySearchPanel = ({onSearch,onClear,exportFile }) => 
   const searchHandler = () => {
   // ...
   return (
   //if the codition is true show dropdown otherwise show nothing
    <div>
   {Condition ? <Dropdown /> : null } 
    </div>
  );
  // ...

我希望这能回答你的问题。

如何将 react.js 文件的 HTML 部分用于另一个 react.js 文件

How to use a HTML portion of a react.js file to another react.js file

javascript

reactjs

primereact