javascript - আমি React.js একটি উপাদান এর props আপডেট করতে পারেন?

reactjs properties (4)

কোনও উপাদান তার নিজস্ব প্রোপগুলি আপডেট করতে পারে না যতক্ষণ না তারা অ্যারে বা বস্তু থাকে (যদি কোনও উপাদান তার নিজস্ব প্রপ্সগুলি আপডেট করে তবে এমনকি এটি একটি প্যাটার্ন-এন্টি-প্যাটার্ন) তবে এটির অবস্থা এবং তার সন্তানের উত্সগুলি আপডেট করতে পারে।

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

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

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

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

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

তারা অ্যারে যদি props আপডেট ট্রিক:

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
      }
    }
  increament(){
    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.increament.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,
  },
});

যদি আপনি mapProps ব্যবহার mapProps , তবে নতুন mapProps ইনকামিং mapProps থেকে তৈরি করতে 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);

সাজসরঞ্জাম

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

অবস্থা

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

ভাল উদাহরণ ইতিমধ্যে Valéry দ্বারা প্রদান করা হয়।