Материал-интерфейс для нового крючка Reactjs? - PullRequest
Новая
       5

Материал-интерфейс для нового крючка Reactjs?

0 голосов
/ 11 июля 2019

Привет, мне нужна помощь. Все новые примеры того, как заставить реагировать сайты, показывают примеры вроде 

const NavBar = (params) => {
    return(
        <div>
        text
        </div>
    )
}
export default NavBar;

однако материал-интерфейс, кажется, показывает следующее, из-за чего мне очень трудно понять, как заставить вкладки работать с новым форматом кода выше. Может кто-нибудь помочь объяснить, как работает конструктор в новом формате? Пример с рабочей вкладкой был бы великолепен (но, возможно, слишком много просил) 

import React from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
};

export default class TabsExampleControlled extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 'a',
    };
  }

  handleChange = (value) => {
    this.setState({
      value: value,
    });
  };

  render() {
    return (
      <Tabs
        value={this.state.value}
        onChange={this.handleChange}
      >
        <Tab label="Tab A" value="a">
          <div>
            <h2 style={styles.headline}>Controllable Tab A</h2>
            <p>
              Tabs are also controllable if you want to programmatically pass them their values.
              This allows for more functionality in Tabs such as not
              having any Tab selected or assigning them different values.
            </p>
          </div>
        </Tab>
        <Tab label="Tab B" value="b">
          <div>
            <h2 style={styles.headline}>Controllable Tab B</h2>
            <p>
              This is another example of a controllable tab. Remember, if you
              use controllable Tabs, you need to give all of your tabs values or else
              you wont be able to select them.
            </p>
          </div>
        </Tab>
      </Tabs>
    );
  }
}

EDIT

Я нашел то, что мне нужно было сделать Используя useState, я мог проверить, на какой странице используется приложение, и убедиться, что это был первый раз, когда пользователь зашел на сайт, затем установить const, который затем позволяет мне запустить еще один const, чтобы установить вкладку, которая должна быть активной. 

const firstTime = false;       
React.useState(() => {
          if(!firstTime && window.location.pathname === "/two"){
            //console.log('mounted or updated')
            firstTime = 1;
          }
        }
      );


    const [value, setValue] = React.useState(firstTime);

1 Ответ

0 голосов
/ 11 июля 2019

Из MDN:

"Метод конструктора - это специальный метод для создания и инициализации объекта, созданного в классе."

Пример material-ui - это компонент класса, а новыйПримером является компонент функции.Компоненты функций не используют конструкторы.

До недавнего времени, когда был представлен API-интерфейс Hooks, если компоненту требовалось использовать State, он должен был быть компонентом класса, но с помощью Hooks состоянием теперь можно управлять внутрифункциональные компоненты.Я предлагаю вам прочитать об этом.Вот хороший стартер: https://overreacted.io/how-are-function-components-different-from-classes/

Ниже приведена переработанная версия с использованием компонента функции и хуков: 

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Tabs, Tab } from "@material-ui/core";

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400
  }
};

const TabsExampleControlled = props => {
  const [value, setValue] = useState("a");

  return (
    <Tabs value={value} onChange={(event, value) => setValue(value)}>
      <Tab label="Tab A" value="a">
        <div>
          <h2 style={styles.headline}>Controllable Tab A</h2>
          <p>
            Tabs are also controllable if you want to programmatically pass them
            their values. This allows for more functionality in Tabs such as not
            having any Tab selected or assigning them different values.
          </p>
        </div>
      </Tab>
      <Tab label="Tab B" value="b">
        <div>
          <h2 style={styles.headline}>Controllable Tab B</h2>
          <p>
            This is another example of a controllable tab. Remember, if you use
            controllable Tabs, you need to give all of your tabs values or else
            you wont be able to select them.
          </p>
        </div>
      </Tab>
    </Tabs>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<TabsExampleControlled />, rootElement);

проверьте это здесь https://codesandbox.io/s/material-ui-tabs-hooks-wkyzq

...