如何将一个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>
);
// ...

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