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

【问题标题】：How to use a HTML portion of a react.js file to another react.js file如何将 react.js 文件的 HTML 部分用于另一个 react.js 文件
【发布时间】：2021-03-07 13:40:34
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs primereact

【解决方案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>
  );
  // ...

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

【讨论】：