রিএকটিজে {… this.prop} এর অর্থ কী

Question

মানে কি

{...this.props}

আমি এটির মতো ব্যবহার করার চেষ্টা করছি

 <div {...this.props}> Content Here </div>

Answer 1

এটিকে স্প্রেড অ্যাট্রিবিউট বলা হয় এবং এর লক্ষ্য প্রপসকে পাস করা আরও সহজ করা।

আসুন আমরা কল্পনা করি যে আপনার কাছে এমন একটি উপাদান রয়েছে যা N নম্বর সংখ্যাকে গ্রহণ করে। এগুলি অতিক্রম করা ক্লান্তিকর এবং অস্বাস্থ্যকর হতে পারে যদি সংখ্যাটি বাড়তে থাকে।

<Component x={} y={} z={} />

সুতরাং এর পরিবর্তে আপনি এটি করেন, এগুলিকে কোনও বস্তুতে মুড়িয়ে রাখুন এবং স্প্রেড নোটেশনটি ব্যবহার করুন

var props = { x: 1, y: 1, z:1 };
<Component {...props} />

যা এটিকে আপনার উপাদানগুলির প্রপসগুলিতে আনপ্যাক করবে, অর্থাত্ আপনি {... props}নিজের render()ফাংশনটির অভ্যন্তরে "কখনই" ব্যবহার করবেন না , কেবলমাত্র যখন আপনি প্রপসটিকে অন্য কোনও উপাদানটিতে পাস করবেন। আপনার আনপ্যাকড প্রসগুলি স্বাভাবিক হিসাবে ব্যবহার করুন this.props.x।

Comments

কেবল যোগ করার জন্য, এটি এটিকে প্রতিস্থাপন this.transferPropsTo0.12.x এ অবমানিত এবং 0.13.x সালে সরানো হবে এমন প্রতিস্থাপন হিসাবে এটি ভাবতে সহায়তা করতে পারে। অবশ্যই এটা অনেক আরো উন্নত ব্যবহার তবে কেবল অনুবাদ প্রতিক্রিয়া 0.11.x এর অনুমতি দেয় this.transferPropsTo(<Foo />)করার <Foo {...this.props} />যে রূপান্তরটি উপার্জন মানুষের জন্য সবচেয়ে দরকারী।

— মাইক ড্রাইভার 14

গুড অ্যাঞ্জার, তবে আপনি যখন প্রপোজগুলি অন্য কোনও উপাদানটিতে পাস করেন কেবল তখনই আপনি আপনার রেন্ডার () ফাংশনের অভ্যন্তরে never ... প্রপস use ব্যবহার করেন না '' শব্দগুচ্ছ একটি খুব বিভ্রান্তিকর শব্দ। পুনর্লিখনের জন্য সুপারিশটি হ'ল "যখন আপনি প্রপসগুলি অন্য কোনও উপাদানকে পাস করেন তখন" আপনি কেবল আপনার রেন্ডার () এর ভিতরে {... প্রপস ব্যবহার করেন। " স্বচ্ছতার জন্য.

— dprogramz

Answer 2

এটি ES6 Spread_operatorএবং Destructuring_assignment।

<div {...this.props}>
  Content Here
</div>

এটি সমান Class Component

const person = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

class TestDemo extends React.Component {
    render() {
        const {name, age, country} = {...this.props};
        // const {name, age, country} = this.props;
        return (
          <div>
              <h3> Person Information: </h3>
              <ul>
                <li>name={name}</li>
                <li>age={age}</li>
                <li>country={country}</li>
              </ul>
          </div>
        );
    }
}

ReactDOM.render(
    <TestDemo {...person}/>
    , mountNode
);

---

অথবা Function component

const props = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

const Test = (props) => {
  return(
    <div
        name={props.name}
        age={props.age}
        country={props.country}>
        Content Here
        <ul>
          <li>name={props.name}</li>
          <li>age={props.age}</li>
          <li>country={props.country}</li>
        </ul>
    </div>
  );
};

ReactDOM.render(
    <div>
        <Test {...props}/>
        <hr/>
        <Test 
            name={props.name}
            age={props.age}
            country={props.country}
        />
    </div>
    , mountNode
);

refs

• https://babeljs.io/docs/plugins/transform-object-rest-spread/

• https://facebook.github.io/react/docs/components-and-props.html

Answer 3

এটি এটি সংকলন করবে:

React.createElement('div', this.props, 'Content Here');

আপনি উপরের দেখতে পাচ্ছেন, এটি সমস্ত প্রপসগুলিতে চলে যায় div।

Answer 4

এটি ES-6 বৈশিষ্ট্য। এর অর্থ আপনি প্রপসের সমস্ত বৈশিষ্ট্য নিষ্কাশন করে div.{... }

অপারেটর একটি বস্তুর বৈশিষ্ট্য নিষ্কাশন করতে ব্যবহৃত হয়।

Answer 5

আপনি আপনার সন্তানের উপাদানগুলিতে প্রপস ব্যবহার করবেন

উদাহরণ স্বরূপ

যদি আপনার এখন উপাদানগুলি হয়

{
   booking: 4,
   isDisable: false
}

আপনি আপনার সন্তানের সংমিশ্রণে এই প্রপস ব্যবহার করতে পারেন

 <div {...this.props}> ... </div>

আপনার সন্তানের অংশে, আপনি আপনার পিতামাতার সমস্ত প্রপস পাবেন।

Comments

ভাল উত্তর তবে আরও ভাল হবে যদি আপনি প্রপস কীসের জন্য কোনও ব্যাখ্যা অন্তর্ভুক্ত করেন।

— মাইক পুলি