react从函数返回JSX

Question

从Render函数的FilterBydescription组件中，我尝试返回jsx元素。但是UseAdvertisementsFilters中的jsx没有定义。很可能上下文丢失了，但我不明白为什么。帮助从函数返回jsx。

const FilterBydescription = () => {
const [findByDescription, bindFindByDescription, resetFindByDescription] = useInput('')
const Render = () => {
return <FilterInput bind={bindFindByDescription} placeholder={"Find by description"} />;
};
return { Render };
}
export function UseAdvertisementsFilters({isLoading}){
return(
<aside className="col-xl-3 filter_detail">
<Row className="filter_detail__wrapper">
<Col xs={12}>
<Row>
<Col className={"filter_detail__search"} xs={12}>
{/* Get undefined */}
{FilterBydescription.Render}
</Col>
</Row>
</Col>  
</Row>
</aside>
)
}

Answer 1

您的问题是您试图从FilterBydescription函数访问函数。正如你现在看到的，FilterBydescription不是一个React组件。它是一个返回Render方法的函数，该方法渲染React组件。因此，当尝试从FilterBydescription访问Render属性时，您将获得undefined。

你可能想做的是让FilterBydescription成为一个组件，并在你的UseAdvertisementsFilters组件中渲染该组件。

像这样:

const FilterByDescription = () => {
const [
findByDescription,
bindFindByDescription,
resetFindByDescription,
] = useInput('');
return (
<FilterInput
bind={bindFindByDescription}
placeholder={'Find by description'}
/>
);
};
export function UseAdvertisementsFilters({ isLoading }) {
return (
<aside className="col-xl-3 filter_detail">
<Row className="filter_detail__wrapper">
<Col xs={12}>
<Row>
<Col className={'filter_detail__search'} xs={12}>
<FilterByDescription />
</Col>
</Row>
</Col>
</Row>
</aside>
);
};

Answer 2

你可以试试下面的代码

const FilterBydescription = () => {

const [findByDescription, bindFindByDescription, resetFindByDescription] = useInput('')


return <FilterInput bind={bindFindByDescription} placeholder={"Find by description"} />;
}

export function UseAdvertisementsFilters({isLoading}){

return(
<aside className="col-xl-3 filter_detail">
<Row className="filter_detail__wrapper">
<Col xs={12}>
<Row>
<Col className={"filter_detail__search"} xs={12}>

{/* Get undefined */}
<FilterBydescription />

</Col>
</Row>
</Col>  
</Row>
</aside>
)
}