मेकसाइल का उपयोग करके घटकों को कैसे स्टाइल करें और सामग्री यूआई में अभी भी जीवनचक्र के तरीके हैं?

Question

जब भी मैं makeStyles()जीवन चक्र विधियों के साथ एक घटक के साथ उपयोग करने का प्रयास करता हूं तो मुझे निम्न त्रुटि मिलती है :

अमान्य हुक कॉल। हुक को केवल एक फ़ंक्शन घटक के शरीर के अंदर कहा जा सकता है। यह निम्न कारणों में से एक के लिए हो सकता है:

1. आपके पास प्रतिक्रिया और रेंडरर के बेमेल संस्करण हो सकते हैं (जैसे कि प्रतिक्रिया डोम)
2. आप हुक के नियम तोड़ रहे होंगे
3. आपके पास एक ही ऐप में एक से अधिक रिएक्ट हो सकते हैं

नीचे कोड का एक छोटा सा उदाहरण है जो इस त्रुटि को पैदा करता है। अन्य उदाहरण बाल वस्तुओं के लिए भी कक्षाएं प्रदान करते हैं। मुझे MUI के दस्तावेज़ में कुछ भी नहीं मिल रहा है जो उपयोग करने के अन्य तरीके दिखाता है makeStylesऔर जीवनचक्र विधियों का उपयोग करने की क्षमता रखता है।

    import React, { Component } from 'react';
    import { Redirect } from 'react-router-dom';

    import { Container, makeStyles } from '@material-ui/core';

    import LogoButtonCard from '../molecules/Cards/LogoButtonCard';

    const useStyles = makeStyles(theme => ({
      root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      },
    }));

    const classes = useStyles();

    class Welcome extends Component {
      render() {
        if (this.props.auth.isAuthenticated()) {
          return <Redirect to="/" />;
        }
        return (
          <Container maxWidth={false} className={classes.root}>
            <LogoButtonCard
              buttonText="Enter"
              headerText="Welcome to PlatformX"
              buttonAction={this.props.auth.login}
            />
          </Container>
        );
      }
    }

    export default Welcome;

Answer 1

हाय, हुक एपीआई का उपयोग करने के बजाय, आपको यहां बताए अनुसार उच्च-क्रम वाले घटक एपीआई का उपयोग करना चाहिए

मैं कक्षा घटक के लिए आपकी आवश्यकता के अनुरूप प्रलेखन में उदाहरण को संशोधित करूंगा

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

class HigherOrderComponent extends React.Component {

  render(){
    const { classes } = this.props;
    return (
      <Button className={classes.root}>Higher-order component</Button>
      );
  }
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

Comments

मैं इस बग और invalid hook callत्रुटि के साथ हलकों में दौर चला रहा हूं - मुझे सही दिशा में लाने के लिए धन्यवाद !!

— किट्सन

@ जैक्सन-पी ने मेरा समाधान देखा

— मैट वेबर

@VikasKumar इस दृष्टिकोण के साथ, मैं अपनी शैलियों में ऐप थीम का उपयोग कैसे कर सकता हूं? Fe सबमिट करें: {मार्जिन: appTheme.spacing (3, 0, 2),},

— सेर्गेई अल्दोखोव

धन्यवाद। लेकिन एक समस्या! आपने themeअपने stylesशरीर में उपयोग नहीं किया (@SergeyAldoukhov ने यह कहा है, पहले से ही)। जब मैं इसका इस्तेमाल, मैं इस त्रुटि मिलती है: "पढ़ा नहीं जा सकता गुण अपरिभाषित के 'एक्स'" और undefinedहै themeकि वास्तव में! मैंने कोशिश की withStyles(styles(myDefinedMuiTheme))(...)और यह सही ढंग से काम किया।

— मीर-इस्माइली

@ किटसन, संभवतः आपने उपयोग किया है makeStyles() ( styles = makeStyles(theme => ({...})) । इसके अलावा, यदि आप विषय-निर्भर शैली चाहते हैं, तो मेरी पिछली टिप्पणी देखें।

— मीर-इस्माइली

Answer 2

मैं के withStylesबजाय इस्तेमाल कियाmakeStyle

EX:

import { withStyles } from '@material-ui/core/styles';
import React, {Component} from "react";

const useStyles = theme => ({
        root: {
           flexGrow: 1,
         },
  });

class App extends Component {
       render() {
                const { classes } = this.props;
                return(
                    <div className={classes.root}>
                       Test
                </div>
                )
          }
} 

export default withStyles(useStyles)(App)

Answer 3

क्या हम कर वर्ग घटकों और बनाया कार्यात्मक घटक उपयोग बंद कर दिया है, समाप्त हो गया का उपयोग करuseEffect() से जीवन चक्र के तरीकों के लिए हुक एपीआई । यह आपको हायर-ऑर्डर कंपोनेंट्स बनाने की पेचीदगी को जोड़े बिनाmakeStyles() लाइफसाइकल मेथड्स के साथ उपयोग करने की अनुमति देता है । जो ज्यादा सरल है।

उदाहरण:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Redirect } from 'react-router-dom';

import { Container, makeStyles } from '@material-ui/core';

import LogoButtonCard from '../molecules/Cards/LogoButtonCard';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    margin: theme.spacing(1)
  },
  highlight: {
    backgroundColor: 'red',
  }
}));

// Highlight is a bool
const Welcome = ({highlight}) => { 
  const [userName, setUserName] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(true);
  const classes = useStyles();

  useEffect(() => {
    axios.get('example.com/api/username/12')
         .then(res => setUserName(res.userName));
  }, []);

  if (!isAuthenticated()) {
    return <Redirect to="/" />;
  }
  return (
    <Container maxWidth={false} className={highlight ? classes.highlight : classes.root}>
      <LogoButtonCard
        buttonText="Enter"
        headerText={isAuthenticated && `Welcome, ${userName}`}
        buttonAction={login}
      />
   </Container>
   );
  }
}

export default Welcome;

Comments

16.8 हुक अपडेट या अधिक का उपयोग करने वाले लोगों के लिए, मुझे लगता है कि फ़ंक्शन पर स्विच करना एक आदर्श समाधान है। 16.8 में फ़ंक्शन राज्य और जीवनचक्र के हुक तक पहुंच सकते हैं।

— टिम

मैं चकित हूं कि इसने पतन क्यों किया है। रिएक्ट ने इसे काफी स्पष्ट कर दिया है, हुक के साथ कार्यात्मक घटकों द्वारा प्रतिस्थापित किया जा रहा है। reactjs.org/docs/…

— मैट वेबर

मैंने डाउनवोट नहीं किया, लेकिन यह फ़ंक्शन आधारित घटक का उपयोग करते समय xhr का उपयोग करके आलसी तरीके से प्रारंभिक स्थिति निर्धारित करने के लिए एक दर्द है। क्लास कंपोनेंट के साथ मैं प्रारंभिक स्थिति सेट कर सकता हूं जो भी मैं चाहता हूं, उसके बाद अजाक्स का उपयोग करें फिर एक बार प्रतिक्रिया आने पर सेट करें। मेरे पास पूरी तरह से कोई सुराग नहीं है कि इसे किसी फ़ंक्शन के साथ कैसे करना है।

— एमएलटी

आप उपयोग करेंगे useEffect। ऊपर दिए गए मामले में आप उपयोगकर्ता नाम की प्रारंभिक स्थिति को एक खाली स्ट्रिंग पर सेट कर रहे हैं, फिर एक एपीआई कॉल के बाद आपका बीमा किया useEffectजाएगा setUserName(response)। मैं ऊपर एक उदाहरण जोड़ूंगा और जीवन चक्र के तरीकों के लिए उपयोग के बारे में अधिक जानकारी के साथ एक कलात्मक से लिंक करूंगा। dev.to/prototyp/…

— मैट वेबर

यह नीचे मतदान हो रहा है क्योंकि कार्यात्मक प्रोग्रामिंग वास्तविक अनुप्रयोगों में बेकार हो जाती है जिन्हें वास्तुकला की आवश्यकता होती है। यह जेएस प्रोग्रामर्स के पहले से ही प्रसार की प्रवृत्ति को बढ़ाता है ताकि स्पेगेटी कोड की बड़ी कलियों को बनाया जा सके, जो वास्तव में पढ़ने के लिए कठिन हैं / उचित घटकों में विभाजित होने के लिए पालन करना और असंभव हैं। यदि प्रतिक्रिया इस तरह से आगे बढ़ रही है तो वे एक बड़ी गलती कर रहे हैं, और मैं वहां उनका पालन नहीं करूंगा।

— रिका डे

Answer 4

useStyles एक रिएक्ट हुक है जो कार्यात्मक घटकों में उपयोग किया जाता है और इसका उपयोग कक्षा के घटकों में नहीं किया जा सकता है।

प्रतिक्रिया से:

हुक आपको कक्षा लिखने के बिना राज्य और अन्य प्रतिक्रिया सुविधाओं का उपयोग करने देता है।

इसके अलावा आपको अपने फ़ंक्शन के अंदरuseStyles हुक को कॉल करना चाहिए जैसे;

function Welcome() {
  const classes = useStyles();
...

---

यदि आप हुक का उपयोग करना चाहते हैं, तो यहां आपका संक्षिप्त वर्ग घटक कार्यात्मक घटक में बदल गया है;

import React from "react";
import { Container, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

function Welcome() {
  const classes = useStyles();
  return (
    <Container className={classes.root}>
      <h1>Welcome</h1>
    </Container>
  );
}

export default Welcome;

---

🏓 CodeSandBox ↓ पर

Answer 5

एक अन्य एक समाधान का उपयोग कक्षा के घटकों के लिए किया जा सकता है - बस MuiThemeProvider के साथ डिफ़ॉल्ट MUI थीम गुण को ओवरराइड करें। यह अन्य विधियों की तुलना में अधिक लचीलापन देगा - आप अपने मूल घटक के अंदर एक से अधिक MuiThemeProvider का उपयोग कर सकते हैं।

सरल कदम:

1. अपने वर्ग घटक में MuiThemeProvider आयात करें
2. आयात अपने वर्ग घटक के लिए CreateMuiTheme
3. नई थीम बनाएं
4. रैप लक्ष्य MUI घटक जिसे आप MuiThemeProvider और अपने कस्टम थीम के साथ स्टाइल करना चाहते हैं

कृपया, अधिक जानकारी के लिए इस डॉक्टर की जाँच करें: https://material-ui.com/customization/theming/

import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';

import { MuiThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';

const InputTheme = createMuiTheme({
    overrides: {
        root: {
            background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
            border: 0,
            borderRadius: 3,
            boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
            color: 'white',
            height: 48,
            padding: '0 30px',
        },
    }
});

class HigherOrderComponent extends React.Component {

    render(){
        const { classes } = this.props;
        return (
            <MuiThemeProvider theme={InputTheme}>
                <Button className={classes.root}>Higher-order component</Button>
            </MuiThemeProvider>
        );
    }
}

HigherOrderComponent.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default HigherOrderComponent;

Answer 6

क्लास को एक फ़ंक्शन में बदलने के बजाय, एक आसान कदम यह होगा कि आप अपने मामले में 'क्लासेस' का उपयोग करने वाले कंपोनेंट के लिए jsx को शामिल करने के लिए एक फंक्शन बनाएँ <container></container>और फिर इस फंक्शन को क्लास रेंडर के रिटर्न के अंदर डालें () एक टैग के रूप में। इस तरह आप क्लास से किसी फंक्शन के लिए हुक निकाल रहे हैं। इसने मेरे लिए पूरी तरह से काम किया। मेरे मामले में यह एक ऐसा कार्य था <table>जिसे मैंने एक समारोह में किया था- TableStmt बाहर और इस फ़ंक्शन को रेंडर के अंदर बुलाया<TableStmt/>