通过数据映射不 Return CSS 正确

Question

我正在通过一些 redux 数据进行映射，预计 css 以下元素将相互堆叠，每个结果都有自己独特的容器。

然而，它们似乎合二为一 div。

我是否错误地映射了这些数据？

https://gyazo.com/31c7b43a00da89d84fa18bf144f3dd2e?token=cf8ebf5cdba4e9a125619d8b8707fbc7

  const searchResults = useSelector(state => state.jobsearch.roles.map(role => role.title))
    
    const SearchResultsText = () => {
      return (
          <JobContainer title={searchResults}>
                    <Typography>
                            {searchResults} 
                    </Typography>
                </JobContainer>
      )
      ;
    };

以及 jsx 本身：

 {searchResults && searchResults.length < 3 && (
                    <SearchResultsText/>
                )}

而且容器的 css 是：

const JobContainer = styled.div`
    
    background-color: red;
`;

以及父容器

const SearchContent = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1em;
    overflow-y: auto;
    background-color:blue;
`;

Answer 1

您需要使用 JSX 元素映射搜索结果。

<JobContainer>
  {searchResults && searchResults.length < 3 && searchResults.map((result) =>
    (<SearchResultsText text={result} />)
  )}
</JobContainer>

另外，在 SearchResultsText 中创建一个属性，这样您就可以将每个值传递给组件。

const SearchResultsText = ({ text }) => {
  return (
    <Typography>
      {text}
    </Typography>
  );
};

通过数据映射不 Return CSS 正确

Mapping through Data does not Return CSS Correctly

reactjs

redux