0

我正在尝试将单独的 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
4

1 回答 1

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>
  );
  // ...

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

于 2020-11-24T18:06:22.693 回答