我正在使用elastic search进行搜索任务,目前的搜索结果如下:
不幸的是,我需要收集比ElasticSearch更多的用户信息。因此,我想添加另一个输入框以及下拉菜单上方的大型搜索框中看到的图片。
可悲的是,我几乎没有React的经验。作为初学者,我只想添加一些输入框,看看它是如何显示的。
ElasticSearch源代码中的布局函数如下所示:
function Layout({
className,
children,
header,
box,
bodyContent,
bodyFooter,
bodyHeader,
sideContent
}) {
return (
<div className={appendClassName("sui-layout", className)}>
<div className="sui-layout-header">
<div className="sui-layout-header__inner">{header}</div>
</div>
<div className="sui-layout-header">
<div className="sui-layout-header__box">{box}</div>
</div>
<div className="sui-layout-body">
<div className="sui-layout-body__inner">
<LayoutSidebar className="sui-layout-sidebar">
{sideContent}
</LayoutSidebar>
<div className="sui-layout-main">
<div className="sui-layout-main-header">
<div className="sui-layout-main-header__inner">{bodyHeader}</div>
</div>
<div className="sui-layout-main-body">
{children || bodyContent}
</div>
<div className="sui-layout-main-footer">{bodyFooter}</div>
</div>
</div>
</div>
</div>
);
}
Layout.propTypes = {
className: PropTypes.string,
children: PropTypes.node,
header: PropTypes.node,
box: PropTypes.node,
bodyContent: PropTypes.node,
bodyFooter: PropTypes.node,
bodyHeader: PropTypes.node,
sideContent: PropTypes.node
};
注意,我添加了一个额外的输入 box
.
具体实施如下:
export default function App() {
return (
<SearchProvider config={config}>
<WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
{({ wasSearched }) => {
return (
<div className="App">
<ErrorBoundary>
<Layout
header={
<SearchBox/>
}
sideContent={
<div>
<Facet
field="sentiment"
label="sentiment"
isFilterable={true}
/>
<Facet
field="category"
label="category"
isFilterable={true}
/>
</div>
}
bodyContent={
<Results
titleField="sentence"
/>
}
bodyHeader={
<React.Fragment>
{wasSearched && <PagingInfo />}
{wasSearched && <ResultsPerPage />}
</React.Fragment>
}
bodyFooter={<Paging />}
/>
</ErrorBoundary>
</div>
);
}}
</WithSearch>
</SearchProvider>
);
}
所以我要加一行,写下这样的话:
box={<Some react box code/>}
我希望我的问题是清楚的。有人能帮我吗,怎么做?
谢谢您!
暂无答案!
目前还没有任何答案,快来回答吧!