কীভাবে মেক স্টাইলগুলি ব্যবহার করে উপাদানগুলি স্টাইল করবেন এবং এখনও ম্যাটারিয়াল ইউআইতে লাইফসাইকেল পদ্ধতি রয়েছে?

Question

আমি যখনই makeStyles()লাইফসাইकल পদ্ধতিতে কোনও উপাদান ব্যবহার করার চেষ্টা করি তখন আমি নীচের ত্রুটিটি পাই :

অবৈধ হুক কল। হুকগুলি কেবল কোনও ফাংশন উপাদানগুলির দেহের অভ্যন্তরে কল করা যায়। এটি নিম্নলিখিত কারণেগুলির একটি হতে পারে:

1. আপনার কাছে প্রতিক্রিয়া এবং রেন্ডারারের মিল নেই (যেমন ডিএএমটির প্রতিক্রিয়া)
2. আপনি হুকস এর নিয়ম ভঙ্গ করছেন
3. আপনার কাছে একই অ্যাপে প্রতিক্রিয়াটির একাধিক অনুলিপি থাকতে পারে

নীচে কোডের একটি ছোট উদাহরণ দেওয়া হয়েছে যা এই ত্রুটিটি উত্পাদন করে। অন্যান্য উদাহরণগুলি শিশু আইটেমগুলিতে ক্লাসও নির্ধারণ করে। আমি এমইউআইয়ের ডকুমেন্টেশনে এমন কিছু খুঁজে পাচ্ছি না যা ব্যবহারের অন্যান্য উপায়গুলি দেখায় 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

হাই হুক এপিআই ব্যবহার না করে, আপনার এখানে উল্লিখিত হিসাবে উচ্চ-অর্ডার উপাদান API ব্যবহার করা উচিত

ক্লাস উপাদানগুলির জন্য আপনার প্রয়োজন অনুসারে ডকুমেন্টেশনে উদাহরণটি পরিবর্তন করব

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ত্রুটিটি এবং ত্রুটিটি নিয়ে চেনাশোনাগুলিতে ঘুরে বেড়াচ্ছি - আমাকে সঠিক দিকে নিয়ে যাওয়ার জন্য ধন্যবাদ !!

— কিটসন

@ জ্যাক্স-পি আমার সমাধান দেখুন

— ম্যাট ওয়েবার

@ ভিকাসকুমার এই পদ্ধতির সাথে আমি কীভাবে আমার স্টাইলগুলিতে অ্যাপ থিম ব্যবহার করতে পারি? ফে জমা দিন: {মার্জিন: appTheme.spacing (3, 0, 2),},

— সের্গেই আলদৌখভ

ধন্যবাদ তবে একটা সমস্যা! আপনি themeআপনার stylesশরীরে ব্যবহার করেন নি (@ সের্গেইআল্ডোখভ ইতিমধ্যে এটি বলেছেন)। যখন আমি এটি ব্যবহার, আমি এই ত্রুটি পাবেন: "পড়তে পারছেন না সম্পত্তি অনির্ধারিত 'X' এবং undefinedহয় themeঠিক! আমি চেষ্টা করেছি withStyles(styles(myDefinedMuiTheme))(...)এবং এটি সঠিকভাবে কাজ করেছে।

— মীর-ইসমাইলি

@ কিটসন, সম্ভবত আপনি ব্যবহার করেছেন makeStyles() ( styles = makeStyles(theme => ({...})) । এছাড়াও, আপনি থিম-নির্ভর শৈলী চাইলে আমার আগের মন্তব্য দেখুন।

— মীর-ইসমাইলি

Answer 2

আমি withStylesপরিবর্তে ব্যবহারmakeStyle

প্রাক্তন:

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/…

— ম্যাট ওয়েবার

আমি ডাউনওয়েট করিনি, তবে ফাংশন ভিত্তিক উপাদান ব্যবহার করার সময় এক্সএইচআর ব্যবহার করে প্রাথমিক অবস্থায় অলসভাবে সেট করা ব্যথা। শ্রেণীর উপাদান সহ আমি যা চাই তা প্রারম্ভিক স্থিতি সেট করতে পারি তারপরে একবার প্রতিক্রিয়া উপস্থিত হয়ে এজ্যাক্স তারপর সেটস্টেট ব্যবহার করুন। এটি কোনও ফাংশন দিয়ে কীভাবে সুন্দরভাবে করা যায় তা সম্পর্কে আমার কোনও ধারণা নেই।

— mlt

আপনি ব্যবহার করবেন useEffect। উপরের ক্ষেত্রে আপনি ব্যবহারকারীর নামের প্রাথমিক অবস্থাটি খালি স্ট্রিংয়ে সেট করছেন, তারপরে কোনও এপিআই কল করার পরে আপনার বীমা করা useEffectহবে setUserName(response)। আমি উপরের উদাহরণ এবং জীবনচক্র পদ্ধতিগুলির জন্য ব্যবহারের প্রভাব সম্পর্কে আরও তথ্যের সাথে একটি শৈল্পিকের একটি লিঙ্ক যুক্ত করব। dev.to/prototyp/…

— ম্যাট ওয়েবার

এটি ভোটগ্রহণের নিচে নামছে কারণ ফাংশনাল প্রোগ্রামিং প্রকৃত অ্যাপ্লিকেশনগুলিতে সাফল্য পায় যা আর্কিটেকচারের প্রয়োজন। এটি জেএস প্রোগ্রামারগুলির ইতিমধ্যে প্রগাti় প্রবণতা বাড়ায় স্প্যাগেটি কোডের বড় বড় টারডস তৈরি করতে যা সত্যই সত্যই পড়া / অনুসরণ করা শক্ত এবং যুক্তিসঙ্গত উপাদানগুলিতে বিভক্ত হওয়া অসম্ভব। প্রতিক্রিয়া যদি এইভাবে চাপ দিচ্ছে তবে তারা একটি বড় ভুল করছে, এবং আমি সেখানে তাদের অনুসরণ করব না।

— রিকিয়া

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;

---

↓ কোডস্যান্ডবক্স 🏓 এ ↓

Answer 5

শ্রেণীর উপাদানগুলির জন্য আরও একটি সমাধান ব্যবহার করা যেতে পারে - কেবল MuiThemeProvider এর সাথে ডিফল্ট MUI থিম বৈশিষ্ট্যগুলিকে ওভাররাইড করে। এটি অন্যান্য পদ্ধতির তুলনায় আরও নমনীয়তা দেবে - আপনি আপনার প্যারেন্ট উপাদানগুলির মধ্যে একাধিক MuiThemeProvider ব্যবহার করতে পারেন।

সহজ পদক্ষেপ:

1. আপনার শ্রেণীর উপাদানগুলিতে MuiThemeProvider আমদানি করুন
2. আপনার শ্রেণীর উপাদানগুলিতে createMuiTheme আমদানি করুন
3. নতুন থিম তৈরি করুন
4. মুই টার্গেট এমইউআই উপাদানটি মুই থিমপ্রোভাইডার এবং আপনার কাস্টম থিমের সাথে স্টাইল করতে চান

দয়া করে আরও তথ্যের জন্য এই দস্তাবেজটি দেখুন: https://matory-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

ক্লাসটিকে কোনও ফাংশনে রূপান্তরিত করার পরিবর্তে, আপনার ক্ষেত্রে ক্ষেত্রে 'ক্লাস' ব্যবহার করে এমন উপাদানগুলির জন্য জেএসএক্স অন্তর্ভুক্ত করার জন্য একটি ফাংশন তৈরি করা <container></container>এবং ক্লাস রেন্ডারের () এর রিটার্নের অভ্যন্তরে এই ফাংশনটি কল করতে একটি সহজ পদক্ষেপ হবে ) একটি ট্যাগ হিসাবে। এইভাবে আপনি ক্লাস থেকে কোনও ফাংশনে হুকটি সরিয়ে নিচ্ছেন। এটা আমার জন্য পুরোপুরি কাজ করেন। আমার ক্ষেত্রে এটি ছিল <table>যা আমি একটি ফাংশন-টেবিলস্টেম্টের বাইরে চলে এসেছি এবং এই ফাংশনটিকে রেন্ডার হিসাবে ডেকে আছি<TableStmt/>