从函数中反应 return jsx

Question

从 Render 函数的 FilterBydescription 组件，我尝试 return jsx 元素。但是我没有定义 UseAdvertisementsFilters 中的 jsx。很可能上下文丢失了，但我不明白为什么。帮助 return 函数中的 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

你可以试试这个代码

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>
        )
    }

Answer 2

您的问题是您正试图从 FilterBydescription 函数访问函数。正如您现在所拥有的，FilterBydescription 不是 React 组件。这是一个 returns 一个 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>
  );
};

从函数中反应 return jsx

react return jsx from function

javascript

reactjs

jsx

arrow-functions