আমি কি React.js এ কোনও উপাদানগুলির প্রপসগুলি আপডেট করতে পারি?

Question

React.js এর সাথে কাজ শুরু করার পরে, মনে হচ্ছে propsস্থির হওয়ার উদ্দেশ্যে করা হয়েছে (প্যারেন্ট উপাদান থেকে পাস করা হয়েছে), যখন stateইভেন্টের উপর ভিত্তি করে পরিবর্তনগুলি। যাইহোক, আমি দস্তাবেজগুলিতে একটি রেফারেন্স লক্ষ করেছি componentWillReceiveProps, যার মধ্যে এই উদাহরণটি অন্তর্ভুক্ত রয়েছে:

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

এর থেকে বোঝা যাচ্ছে যে বৈশিষ্ট্যগুলি তুলনার উপর ভিত্তি করে কোনও উপাদানটিতে পরিবর্তন nextPropsকরতে পারে this.props। আমি কী মিস করছি? প্রপস কীভাবে পরিবর্তিত হয়, বা যেখানে এটি বলা হয় সে সম্পর্কে আমি ভুল করছি?

Answer 1

কোনও উপাদান তার নিজস্ব প্রপস আপডেট করতে পারে না যদি না তারা অ্যারে বা অবজেক্ট হয় (একটি উপাদান একটি অ্যান্টি-প্যাটার্ন হলেও সম্ভব তার নিজস্ব প্রপস আপডেট করে) তবে তার রাজ্য এবং তার সন্তানের প্রপস আপডেট করতে পারে।

উদাহরণস্বরূপ, ড্যাশবোর্ডের speedতার রাজ্যে একটি ক্ষেত্র রয়েছে এবং এটি একটি গেজ শিশুকে দেয় যা এই গতিটি প্রদর্শন করে। এর renderপদ্ধতিটি ঠিক return <Gauge speed={this.state.speed} />। ড্যাশবোর্ড কল this.setState({speed: this.state.speed + 1})করলে গেজটি নতুন মানটির সাথে পুনরায় রেন্ডার হয় speed।

এটি হওয়ার ঠিক আগে, গেজকে componentWillReceivePropsবলা হয়, যাতে গেজকে নতুন মানটিকে পুরানোটির সাথে তুলনা করার সুযোগ পায়।

Comments

সুতরাং এটির মতো শোনাচ্ছে যখন প্রতিক্রিয়া উপাদানটি আরম্ভ করা হয় এবং প্রপসগুলি গ্রহণ করা হয় তখন একবার এটি ডাকা হয়। প্রোপসগুলি আসলে কোনও উপাদান তৈরি হয়ে গেলে "পরিবর্তন" করে না। এটা কি সঠিক?

— ম্যাট হাগিনস

বিপরীত। ডকুমেন্টেশন বলছে: "প্রার্থনা একটি উপাদান নতুন সাজসরঞ্জাম গ্রহণ হয় যখন জন্য প্রারম্ভিক রেন্ডার এই পদ্ধতি বলা হয় না।।"

— Valéry

ধন্যবাদ। এই প্রশ্নটি প্রতিক্রিয়াটির প্রাথমিক ভুল বোঝাবুঝি থেকে এসেছে যে স্ক্রিনটি (বা স্ক্রিনের অংশ) পুনঃস্থাপনের সময় কোনও উপাদান পুনরায় ব্যবহার করা হবে।

— ম্যাট হাগিনস

হ্যাঁ. কোনও উপাদান কোনও ইভেন্ট শোনার জন্য এবং ইভেন্টটি প্রতিবার আগুনের সাথে সাথে তার অবস্থা আপডেট করতে পারে।

— ভ্যালারি

আমি ভবিষ্যত থেকে এসেছি: componentWillReceivePropsএখন পুরানো: এবং getDerivedStateFromPropsএবং এর সংমিশ্রণ দ্বারা প্রতিস্থাপিত componentDidUpdate।

— bvdb

Answer 2

সাজসরঞ্জাম

প্রতিক্রিয়াযুক্ত উপাদানগুলির তথ্য সংরক্ষণের জন্য প্রপস ব্যবহার করা উচিত যা পরিবর্তন করা যেতে পারে, তবে কেবলমাত্র একটি আলাদা উপাদান দ্বারা পরিবর্তন করা যেতে পারে।

অবস্থা

একটি প্রতিক্রিয়া উপাদান উপাদান সংরক্ষণ করতে রাষ্ট্র ব্যবহার করা উচিত যা উপাদান নিজেই পরিবর্তন করতে পারে।

একটি ভাল উদাহরণ ইতিমধ্যে Valéry দ্বারা সরবরাহ করা হয়েছে।

Comments

@ আলি_দ্রাভি কোথাও কোথাও অনুলিপিযুক্ত? যদি তাই হয় তবে রেফারেন্স কী? বা এগুলি কি আপনার শব্দ এবং আপনি কেবল তাদের জোরের উদ্ধৃতি হিসাবে ফর্ম্যাট করেছেন?

— রব বেদনার্ক

@ রববেদনার্ক আমি এখন সঠিক উত্সটি মনে করতে পারি না তবে নিশ্চিত যে এটি কোনও বইয়ের বাক্যে বাক্যটিতে সামান্য পরিবর্তন নিয়ে সত্য বক্তব্য।

— আলী আদ্রভি

Answer 3

প্রোপসগুলি পরিবর্তন করতে পারে যখন কোনও উপাদানটির পিতামাতারা বিভিন্ন বৈশিষ্ট্য নিয়ে আবার উপাদানটিকে রেন্ডার করে। আমি মনে করি এটি বেশিরভাগই একটি অপ্টিমাইজেশন যাতে কোনও নতুন উপাদান তাত্ক্ষণিক হওয়া দরকার না।

Answer 4

প্রপসগুলি অ্যারে থাকলে আপডেট করার কৌশল:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

class Counter extends Component {
  constructor(props) {
    super(props);
      this.state = {
        count: this.props.count
      }
    }
  increment(){
    console.log("this.props.count");
    console.log(this.props.count);
    let count = this.state.count
    count.push("new element");
    this.setState({ count: count})
  }
  render() {

    return (
      <View style={styles.container}>
        <Text>{ this.state.count.length }</Text>
        <Button
          onPress={this.increment.bind(this)}
          title={ "Increase" }
        />
      </View>
    );
  }
}

Counter.defaultProps = {
 count: []
}

export default Counter
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Comments

আমি ভাবছি যে প্রপসের সাহায্যে রাষ্ট্রের সূচনাটি অ্যান্টি-প্যাটার্ন, এড়ানো উচিত। github.com/vasanthk/react-bit/blob/master/anti-patterns/… পড়ার জন্য এখানে ভাল লিঙ্কটি ।

— tryHendri

Answer 5

হুকগুলির সাহায্যে অনেক কিছু পরিবর্তিত হয়েছে, যেমন + এ componentWillReceivePropsপরিণত হয়েছে ( এটি অন্য এসও উত্তরে দেখানো হয়েছে ), তবে প্রপসগুলি এখনও কেবল পঠনযোগ্য , সুতরাং কেবলমাত্র কলার পদ্ধতিতে এটি আপডেট করা উচিত।useEffectuseRef

Answer 6

আপনি যদি ব্যবহার করেন তবে আগত প্রপস থেকে উদ্ভূত নতুন প্রস তৈরি করতে recomposeব্যবহার করুনmapProps

উদাহরণস্বরূপ সম্পাদনা করুন:

import { compose, mapProps } from 'recompose';

const SomeComponent = ({ url, onComplete }) => (
  {url ? (
    <View />
  ) : null}
)

export default compose(
  mapProps(({ url, storeUrl, history, ...props }) => ({
    ...props,
    onClose: () => {
      history.goBack();
    },
    url: url || storeUrl,
  })),
)(SomeComponent);

Comments

দয়া করে একটি উদাহরণ সরবরাহ করুন

— vsync