প্রশ্ন ট্যাগ «jsx»

একটি সাধারণ উপাদান দেওয়া হয়েছে যা তার শিশুদের রেন্ডার করে: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; প্রশ্ন: বাচ্চাদের প্রোপ টাইপটি কী হওয়া উচিত? যখন আমি এটিকে কোনও অবজেক্ট হিসাবে সেট করি, …

265 reactjs  jsx  react-proptypes 

কাজ করার সময় আমার মনে খুব বিভ্রান্তিকর কিছু পাওয়া যায় React। ইন্টারনেটে প্রচুর উদাহরণ পাওয়া যায় যা .jsপ্রতিক্রিয়া সহ ফাইলগুলি ব্যবহার করে তবে অনেকেই .jsxফাইল ব্যবহার করেন । আমি .jsxফাইলগুলি সম্পর্কে পড়েছি এবং আমার বোধগম্যতা হল তারা আপনাকে কেবল নিজের মধ্যে এইচটিএমএল ট্যাগ লিখতে দেয় javascript। তবে একই জিনিস .jsফাইলগুলিতেও …

211 reactjs  jsx 

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

175 javascript  reactjs  jsx  react-hooks 

আমি একটি প্রতিক্রিয়া উপাদান লিখতে চেষ্টা করি। এইচটিএমএল শিরোনাম ট্যাগগুলির জন্য (এইচ 1, এইচ 2, এইচ 3, ইত্যাদি ...), যেখানে শিরোনামের অগ্রাধিকারটি প্রপসগুলিতে আমরা নির্ধারিত অগ্রাধিকারের ভিত্তিতে গতিশীল পরিবর্তন করে। এখানে আমি যা করার চেষ্টা করি। <h{this.props.priority}>Hello</h{this.props.priority}> প্রত্যাশিত আউটপুট: <h1>Hello</h1> এটি কাজ করছে না। এটি করার কোনও সম্ভাব্য পদ্ধতি আছে?

162 reactjs  jsx 

এখানে আমি কী চেষ্টা করেছি এবং কীভাবে ভুল হয় Here এইটা কাজ করে: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> এটি করে না: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> বর্ণনা বৈশিষ্ট্যটি এইচটিএমএল সামগ্রীর সাধারণ স্ট্রিং। তবে এটি কোনও স্ট্রিং হিসাবে রেন্ডার করা হয়েছে, কোনও কারণে HTML হিসাবে নয়। কোনও পরামর্শ?

159 javascript  html  reactjs  jsx 

এটি দেখার সঠিক উপায়টি কী তা আগ্রহী: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; …

141 javascript  reactjs  jsx 

আমার নিম্নরূপে খুব সাধারণ কার্যকরী উপাদান রয়েছে: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; এবং অন্য উপাদান: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout = (props: …

137 reactjs  typescript  jsx  typescript2.0 

আমি আমার প্রতিক্রিয়া অ্যাপ্লিকেশনটির সাথে লিঙ্ক চালাচ্ছি এবং আমি এই ত্রুটিটি পেয়েছি: error JSX props should not use arrow functions react/jsx-no-bind এবং এখানেই আমি তীর ফাংশনটি চালাচ্ছি (ভিতরে onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

আমি জেএসএক্সে & nbsp ট্যাগ ব্যবহার করছি এবং এটি স্থানটি সরবরাহ করছে না। নিম্নলিখিতটি আমার কোডের একটি ছোট স্নিপেট। অনুগ্রহ করে সহায়তা করুন। var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> </select> <button …

101 html  reactjs  jsx 

আমার কাছে একটি চেকবক্স টিএসএক্স (জেএসএক্স) উপাদান রয়েছে: <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> বনাম কোডের সাহায্যে আমি জানি যে ইনপুট প্যারামিটার প্রকার this.handleCheckboxClickহয় MouseEvent<HTMLInputElement>। সুতরাং আমি এটি দিয়ে এটি প্রয়োগ করেছি: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } তারপরে [ts] Type 'MouseEvent' is not generic.নীচের চিত্রটিতে প্রদর্শিত হিসাবে আমি একটি ত্রুটি …

92 reactjs  typescript  events  types  jsx 

আমি টাইপসক্রিপ্ট, প্রতিক্রিয়া এবং রেডাক্স (সমস্ত ইলেক্ট্রন চলমান) নিয়ে একটি প্রকল্পে কাজ করছি, এবং যখন আমি অন্য শ্রেণীর উপর ভিত্তি করে একটি শ্রেণিভিত্তিক উপাদান অন্তর্ভুক্ত করছি এবং তাদের মধ্যে পরামিতিগুলি পাস করার চেষ্টা করছি তখন আমি একটি সমস্যার মুখোমুখি হয়েছি। আলগাভাবে বলতে গেলে, আমি ধারক উপাদানটির জন্য নিম্নলিখিত কাঠামোটি পেয়েছি: …

91 reactjs  typescript  redux  electron  jsx 

আমি সেটআপ করেছি eslint& eslint-plugin-react। আমি যখন ইএসলিন্ট চালনা করি, তখন no-unused-varsপ্রতিটি রেঅ্যাক্ট উপাদানগুলির জন্য লিন্টার ত্রুটিগুলি প্রদান করে। আমি ধরে নিচ্ছি যে এটি জেএসএক্স বা প্রতিক্রিয়া সিনট্যাক্স ব্যবহার করছি তা স্বীকৃতি দিচ্ছে না। কোন ধারনা? উদাহরণ: app.js import React, { Component } from 'react'; import Header from './header.js'; export …

91 javascript  reactjs  jsx  eslint 

আমি বর্তমানে প্রতিক্রিয়া নেটিভ ব্যবহার করে একটি পরীক্ষা অ্যাপ তৈরি করছি। ইমেজ মডিউল, এখন পর্যন্ত ঠিকঠাক কাজ করেছে। উদাহরণস্বরূপ, যদি আমার নামযুক্ত কোনও চিত্র থাকে avatarতবে নীচের কোড স্নিপেটটি ভাল কাজ করে। <Image source={require('image!avatar')} /> তবে আমি যদি এটি একটি গতিশীল স্ট্রিংয়ে পরিবর্তন করি তবে আমি পাই <Image source={require('image!' + …

87 javascript  react-native  jsx