reactjs - meaning - react native




প্রতিক্রিয়াতে ইনলাইন সিএসএস শৈলীগুলি: কীভাবে বাস্তবায়ন করবেন: হোভার? (12)

onMouseOver এবং onMouseLeave সেটস্টেট সহ প্রথমে আমার কাছে কিছুটা ওভারহেডের মতো মনে হয়েছিল - তবে এটি যেমন প্রতিক্রিয়া দেখায় কাজ করে, এটি আমার কাছে সবচেয়ে সহজ এবং পরিষ্কার সমাধান বলে মনে হয়।

উদাহরণস্বরূপ একটি থেরিং সিএসএস সার্ভারসাইড রেন্ডারিংও একটি ভাল সমাধান এবং প্রতিক্রিয়া উপাদানগুলি আরও পরিষ্কার রাখে।

যদি আপনাকে উপাদানগুলিতে গতিশীল স্টাইল যুক্ত করতে না হয় (উদাহরণস্বরূপ একটি থেরিং) আপনার ইনলাইন স্টাইলগুলি মোটেও ব্যবহার করা উচিত নয় তবে পরিবর্তে CSS ক্লাস ব্যবহার করা উচিত।

এইচটিএমএল / জেএসএক্স পরিষ্কার এবং সরল রাখার জন্য এটি একটি traditionalতিহ্যবাহী এইচটিএমএল / সিএসএস বিধি।

আমি প্রতিক্রিয়ার ইনলাইন সিএসএস প্যাটার্নটি বেশ পছন্দ করি এবং এটি ব্যবহারের সিদ্ধান্ত নিয়েছি।

তবে, আপনি :hover এবং অনুরূপ নির্বাচক ব্যবহার করতে পারবেন না। তাহলে ইনলাইন সিএসএস স্টাইল ব্যবহার করার সময় হাইলাইট-অন-হোভার কার্যকর করার সর্বোত্তম উপায় কী?

# রিঅ্যাক্টজ থেকে একটি পরামর্শ হ'ল একটি Clickable উপাদান রয়েছে এবং এটি এটি ব্যবহার করুন:

<Clickable>
    <Link />
</Clickable>

Clickable কাছে একটি hovered অবস্থা রয়েছে এবং এটি লিঙ্কে প্রপস হিসাবে পাস করে। যাইহোক, Clickable (এটি আমি যেভাবে প্রয়োগ করেছি) Link একটি onMouseEnter onMouseLeave যাতে এটি onMouseEnter এবং onMouseLeave সেট করতে পারে। এটি বিষয়গুলি কিছুটা জটিল করে তোলে (উদাহরণস্বরূপ একটি div মধ্যে আবৃত span চেয়ে আলাদা আচরণ করে)।

একটি সহজ উপায় আছে কি?


আপনি টাইপস্ক্রিপ্ট সঙ্গে প্রতিক্রিয়া ব্যবহার করে Typestyle তাহলে চেকআউট Typestyle

নীচে এর জন্য একটি নমুনা কোড রয়েছে: হোভার

import {style} from "typestyle";

/** convert a style object to a CSS class name */
const niceColors = style({
  transition: 'color .2s',
  color: 'blue',
  $nest: {
    '&:hover': {
      color: 'red'
    }
  }
});

<h1 className={niceColors}>Hello world</h1>

আপনি রেডিয়াম ব্যবহার করতে পারেন - এটি রিঅ্যাকটিজেএস সহ ইনলাইন শৈলীর জন্য একটি মুক্ত উত্স সরঞ্জাম। এটি আপনার প্রয়োজনীয় নির্বাচকদের যুক্ত করে। খুব জনপ্রিয়, এটি পরীক্ষা করে দেখুন - রাত্রে এনপিএম


আমি আমার সাম্প্রতিক অ্যাপ্লিকেশনগুলির একটিতে এটির জন্য একটি সুন্দর হ্যাক-ইশ সমাধান ব্যবহার করি যা আমার উদ্দেশ্যে কাজ করে এবং আমি ভ্যানিলা জেএসে কাস্টম হোভার সেটিংস ফাংশনগুলি লেখার চেয়ে দ্রুত পেয়েছি (যদিও, আমি স্বীকার করেছি, সম্ভবত বেশিরভাগ পরিবেশে সেরা অভ্যাস নয় not ..) সুতরাং, আপনি যদি এখনও আগ্রহী হন তবে তা এখানে।

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

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

এখানে একটি উদাহরণ:

const useFade = () => {
  const [ fade, setFade ] = useState(false);

  const onMouseEnter = () => {
    setFade(true);
  };

  const onMouseLeave = () => {
    setFade(false);
  };

  const fadeStyle = !fade ? {
    opacity: 1, transition: 'all .2s ease-in-out',
  } : {
    opacity: .5, transition: 'all .2s ease-in-out',
  };

  return { fadeStyle, onMouseEnter, onMouseLeave };
};

const ListItem = ({ style }) => {
  const { fadeStyle, ...fadeProps } = useFade();

  return (
    <Paper
      style={{...fadeStyle, ...style}}
      {...fadeProps}
    >
      {...}
    </Paper>
  );
};
`This works best with an image`

class TestHover extends React.PureComponent {
render() {
const landingImage = {     
"backgroundImage": "url(https://i.dailymail.co.uk/i/pix/2015/09/01/18/2BE1E88B00000578-3218613-image-m-5_1441127035222.jpg)",
"BackgroundColor": "Red", `this can be any color`
"minHeight": "100%",
"backgroundAttachment": "fixed",
"backgroundPosition": "center",
"backgroundRepeat": "no-repeat",
"backgroundSize": "cover", 
"opacity": "0.8", `the hove trick is here in the opcaity slightly see through gives the effect when the background color changes`
    }

  return (
    <aside className="menu">
        <div className="menu-item">
          <div style={landingImage}>SOME TEXT</div>
        </div>
    </aside>
      ); 
  }
}
ReactDOM.render(
    <TestHover />,
  document.getElementById("root")
);
.menu {
top: 2.70em;
bottom: 0px;
width: 100%;
position: absolute;
}

.menu-item {
cursor: pointer;
height: 100%;
font-size: 2em;
line-height: 1.3em;
color: #000;
font-family: "Poppins";
font-style: italic;
font-weight: 800;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}

লক্ষ্য করুন যে "শিশু" ইনলাইন শৈলীতে "রঙ" বৈশিষ্ট্য সেট নেই। যদি এটি হয়ে থাকে তবে এটি কাজ করবে না কারণ ইনলাইন শৈলীটি আমার স্টাইলশীটের চেয়ে প্রাধান্য পাবে।


আমি যদি এই উত্তরটি দিয়ে থাকি তবে আমি 100% নিশ্চিত নই, তবে সিএসএস অনুকরণ করার জন্য এটির কৌশলটি আমি ব্যবহার করি: রঙ এবং চিত্রগুলির ইনলাইন সহ হোভার ইফেক্ট।

.menu-item:nth-child(1):hover {
color: green;
background-color: white;
}

সিএসএস:

export default {
  normal:{
    background: 'purple',
    color: '#ffffff'
  },
  hover: {
    background: 'red'
  }
}

হাওয়ার আগে

import React, {useState} from 'react';
import style from './style.js'

function Button(){

  const [hover, setHover] = useState(false);

  return(
    <button
      onMouseEnter={()=>{
        setHover(true);
      }}
      onMouseLeave={()=>{
        setHover(false);
      }}
      style={{
        ...style.normal,
        ...(hover ? style.hover : null)
      }}>

        MyButtonText

    </button>
  )
}

হোভারে

 .menu-item:nth-child(1):hover { color: green; background-color: white; } 

উদাহরণ: https://codepen.io/roryfn/pen/dxyYqj?editors=0011


আমিও একই পরিস্থিতিতে আছি। সত্যিই উপাদানগুলিতে স্টাইলিং রাখার প্যাটার্নের মতো তবে হোভার রাজ্যগুলি শেষ বাধা হিসাবে মনে হচ্ছে।

আমি যা করেছি তা হ'ল এমন একটি মিক্সিন লিখেছিল যা আপনি আপনার উপাদানগুলিতে যুক্ত করতে পারেন যা হোভার স্টেটগুলির প্রয়োজন। এই মিশ্রণটি আপনার উপাদানগুলির স্থিতিতে একটি নতুন জড়িত সম্পত্তি যুক্ত করবে। এটি ব্যবহারকারীর উপাদানটির মূল ডোম নোডের উপরে ঘোরাফেরা করে এবং যদি ব্যবহারকারীরা উপাদানটি ছেড়ে যায় তবে এটি false সেট করে যদি এটি true থাকে।

এখন আপনার উপাদান রেন্ডার ফাংশনে আপনি এমন কিছু করতে পারেন:

<button style={m(
        this.styles.container,
        this.state.hovered && this.styles.hover,
      )}>{this.props.children}</button>

এখন প্রতিবার আড়াআড়ি রাষ্ট্রের স্থিতি পরিবর্তন করে উপাদানটি পুনরায় রেন্ডার করবে।

আমি এর জন্য একটি স্যান্ডবক্স রেপোও তৈরি করেছি যা আমি নিজেই এই ধরণের কয়েকটি পরীক্ষার জন্য ব্যবহার করি। আপনি যদি আমার বাস্তবায়নের উদাহরণ দেখতে চান তবে এটি পরীক্ষা করে দেখুন।

https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin


প্রতিক্রিয়া উপাদানটির অভ্যন্তরে ইনলাইন স্টাইল থাকার জন্য এটি দুর্দান্ত হ্যাক হতে পারে (এবং এটি ব্যবহার করে: CSS ফাংশনটি হোভার করুন):

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={this.state.hover ? {"backgroundColor": 'red'}: {"backgroundColor": 'blue'}} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
  }

প্রতিক্রিয়া হুক্স ব্যবহার করে আমার সমাধানটি এখানে দেওয়া হল। এটি স্প্রেড অপারেটর এবং টের্নারি অপারেটরকে একত্রিত করে।

style.js

.navBarOption:hover {
  color: black;
}

Button.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

সহজ উপায়টি হল টের্নারি অপারেটর

const styles = {
  container: {
    height: '3em',
    backgroundColor: 'white',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    borderBottom: '1px solid gainsboro',
  },
  parent: {
    display: 'flex',
    flex: 1,
    flexDirection: 'row',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    color: 'darkgrey',
  },
  child: {
    width: '6em',
    textAlign: 'center',
    verticalAlign: 'middle',
    lineHeight: '3em',
  },
};

var NavBar = (props) => {
  const menuOptions = ['home', 'blog', 'projects', 'about'];

  return (
    <div style={styles.container}>
      <div style={styles.parent}>
        {menuOptions.map((page) => <div className={'navBarOption'} style={styles.child} key={page}>{page}</div> )}
      </div>
    </div>
  );
};


ReactDOM.render(
  <NavBar/>,
  document.getElementById('app')
);

হুক ব্যবহার করে:

.menu-item:nth-child(1) {
color: white;
background-color: #001b37;
} 

স্টাইল ইট তৈরি করুন - অংশ হিসাবে - এই কারণে (অন্যরা অন্যান্য লিবস / সিনট্যাক্স বাস্তবায়নের সাথে দ্বিমত পোষণ করছে এবং সম্পত্তি মূল্যবোধের পূর্বনির্ধারিত করার জন্য ইনলাইন স্টাইলিংয়ের সমর্থনের অভাব রয়েছে)) বিশ্বাস করুন আমাদের জাভাস্ক্রিপ্টে কেবল সিএসএস লিখতে সক্ষম হওয়া উচিত এবং এইচটিএমএল-সিএসএস-জেএস-এ সম্পূর্ণরূপে স্বয়ং উপাদান রয়েছে। ES5 / ES6 টেম্পলেট স্ট্রিং সহ আমরা এখন করতে পারি এবং এটি খুব সুন্দরও হতে পারে! :)

npm install style-it --save

ক্রিয়ামূলক সিনট্যাক্স ( JSFIDDLE )

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .intro:hover {
          color: red;
        }
      `}

        <p className="intro">CSS-in-JS made simple -- just Style It.</p>
      </Style>
    );
  }
}

export default Intro;

জেএসএক্স সিনট্যাক্স ( JSFIDDLE )

import {NavLink} from 'react-router-dom'

const Link = styled(NavLink)`     
  background: blue;

  &:hover {
    color: white;
  }
`

...
<Clickable><Link to="/somewhere">somewhere</Link></Clickable>





reactjs