react-js 响应式_使用react js构建响应式标签

最新推荐文章于 2024-04-16 10:05:57 发布

weixin_26645549

最新推荐文章于 2024-04-16 10:05:57 发布

阅读量145

点赞数

文章标签： python java vue javascript ViewUI

原文链接：https://codeburst.io/build-responsive-tabs-using-react-js-86cc3514c881

版权

react-js 响应式

Hello, Lofi Guy here. In this tutorial, I will show you how to easily create responsive tabs using React. You will need to create two small components and that is it. The picture below is what the finished tab menu looks like. If you prefer videos and want more details, here is a YouTube tutorial offering just that.

您好，Lofi Guy在这里。在本教程中，我将向您展示如何使用React轻松创建响应式标签。您将需要创建两个小组件，仅此而已。下图是完成的选项卡菜单的外观。如果您更喜欢视频并希望获得更多详细信息，请参阅此处的YouTube教程。

大纲 (Outline)

In this article we will cover the following:

在本文中，我们将介绍以下内容：

Bootstrap: Installing Bootstrap for a few styles
Bootstrap ：安装Bootstrap的几种样式
TabNav Component: Creating the menu part of the tabs
TabNav组件 ：创建选项卡的菜单部分
Tab Component: Creating the content part of the tabs
选项卡组件 ：创建选项卡的内容部分
App.js: Combining the components to show your tab menu in the browser
App.js ：组合组件以在浏览器中显示选项卡菜单

NOTE: I will not cover detailed project setup in this video, I am starting from a basic React app that was just created using npm init react-app tabs. I am using Visual Studio Code.

注意：我不会在本视频中介绍详细的项目设置，我将从使用npm init react-app tabs创建的基本React应用程序开始。我正在使用Visual Studio Code。

引导程序 (Bootstrap)

We are going to use a little bit of Bootstrap, so install that in the terminal with:

我们将使用一些Bootstrap，因此请使用以下命令在终端中进行安装：

npm install bootstrap

Now open the file called index.js and paste this at the top:

现在打开名为index.js的文件，并将其粘贴到顶部：

import ‘bootstrap/dist/css/bootstrap.min.css’;

import 'bootstrap/dist/css/bootstrap.min.css';

Cool, now you have the CSS part of Bootstrap.

太酷了，现在您有了BootstrapCSS部分。

TabNav组件 (TabNav component)

Next, let’s get right into building these tabs. Create a folder inside of src called components. Inside that, create a file called TabNav.js (refer to my video if this easy stuff is confusing you). I am going to give you the code for this component piece by piece and then explain the most confusing parts after the code.

接下来，让我们开始构建这些选项卡。在src内创建一个名为components的文件夹。在其中创建一个名为TabNav.js的文件(如果这个简单的东西使您感到困惑，请参阅我的视频)。我将逐步为您提供该组件的代码，然后在代码之后解释最令人困惑的部分。

Here we go:

开始了：

import React from 'react';class TabNav extends React.Component {
  render() {
    return (
    );
  }
}
export default TabNav;

The above code is a class component called TabNav with an empty render method. Inside of the return, put:

上面的代码是一个名为TabNav的类组件，具有一个空的render方法。在收益表内，输入：

<div style={{ width: '30%' }}>
  <ul className="nav nav-tabs">
  </ul>
  { this.props.children }
</div>

This is just a div element with a style that makes it so that our tab menu won’t be too large. The unordered list element uses Bootstrap styling to make the tab menu look nice.

这只是一个div元素，其样式使其可以使我们的选项卡菜单不会太大。无序列表元素使用Bootstrap样式使选项卡菜单看起来不错。

Now, if you are not familiar with React, { this.props.children } may be a little confusing. This just means that whenever we use the TabNav component, anything we nest inside of it will render there. For example, if we wrote <TabNav>Hello World</TabNav>, then “Hello World” would show up inside that div and right after the unordered list.

现在，如果您不熟悉React， { this.props.children }可能会有些混乱。这仅意味着，只要我们使用TabNav组件，我们嵌套在其中的任何内容都将在那里渲染。例如，如果我们写了<TabNav>Hello World</TabNav> ，则“ Hello World”将显示在该div中，并在无序列表之后。

Inside of the unordered list, paste the following:

在无序列表的内部，粘贴以下内容：

{
  this.props.tabs.map(tab => {
              const active = (tab === this.props.selected ? 'active ' : '' );
    return (
      <li className="nav-item" key={ tab }>
        <a className={"nav-link " + active + styles.tab} onClick={ () => this.props.setSelected(tab) }>
          { tab }
        </a>
      </li>
    );
  })
}

To explain this, you first need to understand the props that we will pass into this component. They are:

为了解释这一点，您首先需要了解我们将传递给该组件的道具。他们是：

Tabs: An array of strings defining the names of the tabs
制表符：定义制表符名称的字符串数组
Selected: A string that is one of the tabs defined in the tabs array. It is the currently selected tab
已选：一个字符串，它是tabs数组中定义的选项卡之一。它是当前选择的标签
SetSelected: A method that sets the currently selected tab
SetSelected：一种设置当前选定选项卡的方法

To give you a better idea of how the props are used, when we use this component later, it will look something like this:

为了让您更好地了解道具的使用方式，当我们稍后使用此组件时，它将看起来像这样：

<TabNav tabs={[‘Home’, ‘Settings’, ‘Profile’]} selected={ this.state.selected } setSelected={ this.setSelected }>…</TabNav>

<TabNav tabs={['Home', 'Settings', 'Profile']} selected={ this.state.selected } setSelected={ this.setSelected }>…</TabNav>

This this.props.tabs.map(tab => { is looping through every string in tabs. This const active = (tab === this.props.selected ? ‘active ‘ : ‘’ ); stores either a string of ‘active ‘ or an empty string into the variable called active. This is then used as a dynamic style. If this is the selected tab, then it is set to active…which you will see visually later.

此this.props.tabs.map(tab => {正在遍历Tab中的每个字符串。此const active = (tab === this.props.selected ? 'active ' : '' );存储一个字符串' active'或变量名为active的空字符串，然后用作动态样式。如果这是选定的选项卡，则将其设置为active…稍后将在视觉上看到。

Everything inside of return is rendered once for EACH tab. You will see a few more Bootstrap styles used. Also, the onClick attribute is being used to call a method in order to set the selected tab.

对于每个“返回”选项卡，返回中的所有内容都呈现一次。您将看到更多使用的Bootstrap样式。另外，onClick属性用于调用方法以设置选定的选项卡。

标签组件 (Tab component)

Create another file inside of components called Tab.js. This will be nested inside of your TabNav to define the tab you want.

在名为Tab.js的组件内部创建另一个文件。这将嵌套在TabNav内部以定义所需的选项卡。

Inside this file, paste the following:

在此文件内，粘贴以下内容：

import React from 'react';class Tab extends React.Component {  render() {
    if (this.props.isSelected) {
      return (
        <div>
          { this.props.children }
        </div>
      );
    }
    return null;
  }
}export default Tab;

This component takes a prop called isSelected and if this tab is currently selected, it will show the elements nested inside of this Tab component. Otherwise, it returns null which renders nothing for that tab.

该组件采用一个名为isSelected的道具，如果当前选中了此选项卡，它将显示嵌套在此Tab组件内部的元素。否则，它将返回null，从而对该选项卡不呈现任何内容。

App.js (App.js)

Now go to App.js so that we can set things up to see our changes. Paste this in:

现在转到App.js，以便我们进行设置以查看更改。将此粘贴到：

import React from 'react';
import './App.css';
import TabNav from './components/TabNav';
import Tab from './components/Tab';class App extends React.Component {  constructor(props) {
    super(props);
    this.state = {
      selected: 'Home'
    }
  }  setSelected = (tab) => {
    this.setState({ selected: tab });
  }  render() {
    return (
      <div className="App mt-4">
        <TabNav tabs={['Home', 'Settings', 'Profile']} selected={ this.state.selected } setSelected={ this.setSelected }>
          <Tab isSelected={ this.state.selected === 'Home' }>
            <p>Some test text</p>
          </Tab>
          <Tab isSelected={ this.state.selected === 'Settings' }>
            <h1>More test text</h1>
          </Tab>
          <Tab isSelected={ this.state.selected === 'Profile' }>
            <ul>
              <li>List test 1</li>
              <li>List test 2</li>
              <li>List test 3</li>
            </ul>
          </Tab>
        </TabNav>
      </div>
    );
  }
}export default App;

Inside of the app component we define state with selected inside. Also, we define the method to set that state. Anywhere that TabNav is used, these same steps will need to be taken. This is deliberate as it allows the component that uses TabNav to define the tabs it wants to use. The component that uses the TabNav handles logic, so it would be considered a SMART component. TabNav and Tab would be considered DUMMY components because they simply display data and do not handle any logic.

在应用程序组件内部，我们定义内部选中状态。另外，我们定义了设置该状态的方法。在使用TabNav的任何地方，都需要执行这些相同的步骤。这是有意的，因为它允许使用TabNav的组件定义要使用的选项卡。使用TabNav的组件处理逻辑，因此将其视为SMART组件。 TabNav和Tab将被视为DUMMY组件，因为它们仅显示数据并且不处理任何逻辑。

Now if you start your server with npm start you should see a tab menu that lets you navigate. If not, you better reread this or check out the YouTube video to make sure you didn’t forget anything.

现在，如果您使用npm start启动服务器，则应该会看到一个选项卡菜单，可以进行导航。如果没有，您最好重新阅读该内容或观看YouTube视频，以确保您不会忘记任何内容。

结论 (Conclusion)

In this tutorial, you learned how to create a menu of tabs using React. If you are new to React, this should have provided you with a basic introduction into creating components (which is the foundation of React).

在本教程中，您学习了如何使用React创建选项卡菜单。如果您不熟悉React，这应该为您提供了有关创建组件的基本介绍(这是React的基础)。

I hope I was able to help you out today. If so, feel free to check out my YouTube channel for more helpful how-tos. If you have any questions, please comment below and I will see what I can do.

希望今天能对您有所帮助。如果是这样，请随时查看我的YouTube频道以获取更多有用的操作方法。如果您有任何疑问，请在下面评论，我会做的。