将带有样式组件的 javascript 代码放在哪里？答案

【问题标题】：Where to put javascript code with styled components?将带有样式组件的 javascript 代码放在哪里？
【发布时间】：2022-01-24 15:18:04
【问题描述】：

在我的样式化组件中，无法确定在何处放置此代码以用于对员工进行排序。通常我只会将代码放在功能组件的返回语句之上。但是 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 包装在花括号 {} 中，但它仍然不起作用。有什么想法吗？

【问题讨论】：

这能回答你的问题吗？ Arrow function without curly braces

标签： javascript reactjs styled-components

【解决方案1】：

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

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

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

}; // <--- and here

【讨论】：