javascript - 如何将 react.js 文件的 HTML 部分用于另一个 react.js 文件
问题描述
我正在尝试将单独的 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
解决方案
您想将下拉列表导出为组件,然后在您的条件内的其他文件中,您只需使用 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>
);
// ...
我希望这回答了你的问题。
推荐阅读
- xamarin.forms - 来自 appcenter 的 android 11 设备上的应用未安装错误
- django - 'TypeError' 对象没有属性 ''
- mongodb-query - 初学者试图了解聚合是如何工作的
- huawei-mobile-services - 用户从卡片跳转到我的快应用页面后,我的应用如何直接将用户带回卡片?
- javascript - Object.create(http.ServerResponse.prototype) 未定义
- ruby-on-rails - 从 Rails 应用程序启动 logstash
- javascript - 在我对代码进行一些重构后,由于未定义的变量,裁剪图像的脚本失败
- python - 如何在饼图中将百分比标签的颜色更改为白色而不干扰文本标签颜色?
- powershell - 需要从 azure sqldatabase 获取输出
- visual-studio - 安装两个带有字形的不同插件(vsix)时,不会触发边距字形事件