Reactjs 在React中在何处添加函数？

我正在浏览一些教程，我不知道在哪里可以编写/放置多行函数

假设我需要这个过滤函数

const filter = {
  address: 'England',
  name: 'Mark'
};
let users = [{
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: 'tom@mail.com',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    address: 'England'
  }
];


users= users.filter(item => {
  for (let key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
      return false;
  }
  return true;
});s

我应该把它放在哪里？大多数教程都集中在App.js页面上，我学到的唯一一件事就是在这里添加代码{括号中}：

<div>
      <h3> {1+1} </h3>
</div>

{1+1} 

---

但是，将上面的功能添加到里面没有意义/看起来笨重且不可读？或者这是正确的方法？我目前只专注于学习Javascript和前端React（而不是后端）。

下面是一个如何在React中使用该函数的示例：

在App.js文件中定义函数（在App组件中）

在返回的JSX中调用该函数

const-App=（）=>{
constyourfunction=（）=>{
users.filter（函数（项）{
for（过滤器中的var键）{
如果（项[键]==未定义| |项[键]！=过滤器[键]）
返回false；
}
返回true；
});
}
返回(
{yourFunction（）}
);
}

---

它的工作方式与将javascript放在JSX中的方式相同——它只运行标记中的内容，在本例中，这意味着在返回的JSX之外运行函数。

您可以将其放在任何地方，这完全取决于您。试着保持一致。这个功能是在多个组件中使用还是只在一个组件中使用？如果您要在多个地方使用它，您可以创建一个包含所有helper函数的

Helpers.js

文件，如果它更复杂并且需要状态，则可以创建一个自定义挂钩。如果只在一个组件中需要它，则应将其放入该组件的文件中。如果函数不使用组件的任何变量，则不需要位于组件内部。把它放在组件中会导致每次状态改变时都必须重新评估代码。哦，公平点。我假设函数可能会返回一些需要在组件内部呈现的内容，但是如果它没有被呈现，那么它肯定不需要在组件内部。你说它不需要在组件内部是什么意思？如果我将constyourfunction复制到}并将其粘贴到constapp=（）=>{它运行了一个错误：意外的标记？不是函数不需要在组件中，而是不需要在JSX中调用它，除非您实际使用返回值并在JSX中呈现它。就像@Mike所说的，您可以将您的函数粘贴到另一个js文件中，并将其导入到App.js文件中将允许您使函数在其他组件之间可重用。然后您需要获取导入的文件并调用导入的函数来使用它。据我所知，React没有具体的指导原则，它只取决于您希望如何组织事情。以下是我如何安排事情。每个组件都有自己的文件。我试着让每个组件只做一件事。如果它做得太多，就把它分解成一个单独的组件。至于函数，如果我重用它们，我会把它们放在一个助手文件中，并导入我需要的函数。如果我只在一个组件中使用它，我会把它放在同一个文件中。如果该函数使用组件的任何状态，它需要进入com内部如果不是，我将它放在同一个文件中，但作为组件函数声明上方的单独函数。

const App = () => {
   const yourFunction = () => {

    users.filter(function(item) {
    for (var key in filter) {
     if (item[key] === undefined || item[key] != filter[key])
      return false;
    }
      return true;
    });

   }

   return (
   <div>
    <h1>{yourFunction()}</h1>
   </div>
   );

}