带样式组件的 javascript 代码放在哪里？

Question

无法弄清楚在我的样式化组件中将我的员工分类代码放在哪里。通常我只是将代码放在功能组件的 return 语句之上。但是 React 没有。

import styled from "styled-components";
import EmployeeAvatar from "../EmployeeAvatar";

const Styles = styled.div`
  .employee-finder-content {
    width: 1440px;
    background-color: rgb(240, 240, 240);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
`;

export const Content = ({
  employees,
  filtered,
  grabEmployeeData,
  updateDisplayProfile,
}) => (

    employees.sort((a, b) => {
        if (a.name > b.name) {
        return 1;
        } else {
        return -1;
        }   
    })


  <Styles>
    <div onClick={updateDisplayProfile} className={"employee-finder-content"}>
      {filtered === null
        ? employees.map((person) => {
            return (
              <EmployeeAvatar
                name={person.name}
                title={person.title}
                // displayEmployeesProfile={displayEmployeesProfile}
                grabEmployeeData={grabEmployeeData}
                id={person.id}
                key={person.id}
              />
            );
          })
        : filtered.map((person) => {
            return (
              <EmployeeAvatar
                name={person.name}
                title={person.title}
                // displayEmployeesProfile={displayEmployeesProfile}
                grabEmployeeData={grabEmployeeData}
                id={person.id}
                key={person.id}
              />
            );
          })}
    </div>
  </Styles>
);

我尝试将 employees.sort 括在花括号 {} 中，但它仍然不起作用。有什么想法吗？

Answer 1

您试图在 Content 函数中放置多个语句（带有隐式 return），而不将该函数用花括号括起来。用大括号括起来，加上return语句：

export const Content = ({
  employees,
  filtered,
  grabEmployeeData,
  updateDisplayProfile,
}) => { // <--- here
  
  employees.sort... // etc.

  return (
    <Styles>
      //...
    </Styles>
  );

}; // <--- and here

带样式组件的 javascript 代码放在哪里？

Where to put javascript code with styled components?

javascript

reactjs

styled-components