react 组件名称重复_减少重复使用并回收您的React组件

react 组件名称重复

Functions are a great way to reuse code when writing in vanilla Javascript. It can save you a lot of time and makes your code cleaner and easier to read. In React, however, you write your code as a class or functional components that can also be reused by passing in props. I’ll assume you’ve read the hundreds of blog posts on how to create-react-app so let's skip that part altogether and just get started!

使用香草Javascript编写代码时，函数是重用代码的好方法。 它可以节省大量时间，并使您的代码更整洁，更易于阅读。 但是，在React中，您将代码编写为类或功能组件，也可以通过传入props来重用它们。 我假设您已经阅读了数百篇有关如何create-react-app的博客文章，所以让我们完全跳过这一部分，然后开始吧！

We’ll be creating two simple button components that will console.log() "Hello" and the other will log "Shia LaBeouf", naturally. In our /src folder let's create a subfolder called "components" and create our Button component. Your file structure should look like this:

我们将创建两个简单的按钮组件，它们将console.log() “ Hello”，另一个将自然地记录“ Shia LaBeouf”。 在我们的/src文件夹中，创建一个名为“ components”的子文件夹并创建我们的Button组件。 您的文件结构应如下所示：

Let’s make that component a functional component. React Hooks have been the hot new rage past year so I suggest you Google it if you haven’t heard of it. Here’s what our Button component looks like now:

让我们将该组件变成一个功能组件。 过去一年来，React Hooks一直是热门新手，所以如果您没有听说过，我建议您使用Google。 这是我们的Button组件现在的样子：

import React from "react";const Button = () => <button>something</button>;export default Button;

Whoa.

哇

Now, let’s go into our App.js file and replace the starter template that comes with create-react-app with our two Button components. Don't forget to import it up at the top!

现在，让我们进入App.js文件，并用两个Button组件替换create-react-app附带的启动器模板。 不要忘记将其导入顶部！

import React from "react";
import "./App.css";
import Button from "./components/Button";function App() {
  return (
    <>
      <Button />
      <Button />
    </>
  );
}export default App;

Running npm start in your terminal will bring our lovely website to life. Just two buttons that say "something" in the upper left corner against a white background. Hey, I'm teaching you about reusable components, not how to style.

在您的终端上运行npm start将使我们可爱的网站栩栩如生。 仅有两个按钮在白色背景的左上角显示“某物”。 嘿，我在教您关于可重用组件，而不是样式。

So, as it stands, we have two buttons that look the exact same and do the exact same thing (nothing). If you’ve been paying any sort of attention, to make the same button do different things you need to pass it props from its parent. In this case, it’s App.js.

因此，就目前而言，我们有两个按钮看上去完全相同，并且做的完全相同(什么也没做)。 如果您一直在注意，要使同一个按钮执行不同的操作，您需要从其父级传递它的道具。 在这种情况下，它是App.js。

Let’s differentiate between the two “something” buttons by passing it label props:

让我们通过传递标签props来区分两个“事物”按钮：

// App.js<Button label="Hello" />
<Button label="Shia LaBeouf" />

And by receiving the prop as an argument and then calling on those props:

并通过接受道具作为参数，然后调用这些道具：

// Button.jsconst Button = props => <button>{props.label}</button>;

Now take a look at your website. One button says “Hello” and the other says “Shia”, naturally. I think you can see where I’m going with this “props” stuff.

现在看看您的网站。 一个按钮自然会说“你好”，另一个按钮会说“什叶派”。 我认为您可以看到这些“道具”东西的去向。

Let’s add our onClick handlers which will execute a function to log some text into our console:

让我们添加我们的onClick处理程序，该处理程序将执行一个函数以将一些文本记录到控制台中：

// Button.jsconst Button = props => 
  <button onClick={props.log}>
    {props.label}
  </button>;// App.jsconst log = e => {
  console.log(e.target.textContent);
};function App() {
  return (
    <>
      <Button label="Hello" log={log} />
      <Button label="Shia LaBeouf" log={log} />
    </>
  );
}

Now take a look at your console when you click on one of the buttons. We just used the same Button component while naming it two different things and logging two different things to the console. This is what people refer to as reusable components and this is the power of React!

现在，当您单击其中一个按钮时，看看控制台。 我们只是在使用同一个Button组件时将其命名为两个不同的事物，并将两个不同的事物记录到控制台。 这就是人们所说的可重用组件，这就是React的力量！

翻译自: https://medium.com/@2spacemilk/reduce-reuse-and-recycle-your-react-components-c034dccdc660

react 组件名称重复