প্রথম উপাদানটির বিষয়বস্তু ট্রান্সক্লোড করতে কীভাবে কোনও বিক্রিয় উপাদানটিকে অন্য প্রতিক্রিয়া উপাদানগুলিতে পাস করবেন?

Question

কোনও উপাদানকে আরেকটি বিক্রিয়া উপাদানটিতে যাওয়ার কোনও উপায় আছে কি? আমি একটি মডেল প্রতিক্রিয়া উপাদান তৈরি করতে চাই এবং সেই সামগ্রীটি অনুলিপি করতে অন্য প্রতিক্রিয়া উপাদানটিতে পাস করতে চাই।

সম্পাদনা করুন: আমি কী করতে চাইছি তা চিত্রিত করে এখানে একটি রিঅ্যাক্টজেএস কোডেপেন। http://codepen.io/aallbrig/pen/bEhjo

এইচটিএমএল

<div id="my-component">
    <p>Hi!</p>
</div>

ReactJS

/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
      <div>
        <p> Added title </p>
        {this.props.children}
      </div>
    )
  }
});

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

Answer 1

this.props.childrenউপাদানটি অন্তর্ভুক্ত থাকা শিশুদের রেন্ডার করতে আপনি ব্যবহার করতে পারেন :

const Wrap = ({ children }) => <div>{children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>

Comments

আমি এই উত্তরটি ব্যবহার করব। this.props.childrenউপাদান উপাদান API এর অংশ এবং এইভাবে ব্যবহার করা হবে বলে আশা করা হচ্ছে। প্রতিক্রিয়া দলের উদাহরণগুলি এই কৌশলটি ব্যবহার করে যেমন প্রপস স্থানান্তর করার সময় এবং কোনও একক সন্তানের কথা বলার সময় ।

— রস অ্যালেন

নীচে আমার মন্তব্য থেকে: এটিকে প্রপ হিসাবে পাস করার মাধ্যমে আপনি এটিকে একটি নামও দিতে পারেন এবং চেক টাইপ করতে প্রোপটাইপগুলি ব্যবহার করতে পারেন।

— রিটার্নেক্স

@ অ্যান্ড্রু অলব্রাইট: আপনার উদাহরণটি কোনও শিশুকে পাস করছিল না। এটি কাজ করে: কোডেপেন.আইও

— রস অ্যালেন

: এবং যদি আপনি তারপর শিশুদের করে DOM নোড পেতে চান stackoverflow.com/questions/29568721/...

— ericsoco

Answer 2

দ্রষ্টব্য আমি এখানে আরও গভীরতর উত্তর সরবরাহ করেছি

রানটাইম মোড়ক:

এটি সর্বাধিক অভিহিত পদ্ধতি।

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

দ্রষ্টব্য যে childrenপ্রতিক্রিয়াটির একটি "বিশেষ প্রপ" এবং উপরের উদাহরণটি সিনট্যাকটিক চিনির এবং এটি প্রায় (প্রায়) সমান<Wrapper children={<App/>}/>

---

প্রারম্ভিক মোড়ক / এইচওসি

আপনি একটি উচ্চতর অর্ডার উপাদান (এইচওসি) ব্যবহার করতে পারেন । এগুলি সম্প্রতি অফিসিয়াল ডকের সাথে যুক্ত করা হয়েছে।

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

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

লক্ষ্য করুন যে connectরেডাক্সটি রানটাইম মোড়ক হিসাবে ব্যবহৃত হত তবে এটি এইচওসি-তে পরিবর্তিত হয়েছিল কারণ আপনি pureঅপশনটি ব্যবহার করলে এটি অকেজো পুনরায়-রেন্ডারগুলি এড়াতে অনুমতি দেয় (যা ডিফল্টরূপে সত্য)

রেন্ডার পর্বের সময় আপনার কখনই এইচওসি কল করা উচিত নয় কারণ প্রতিক্রিয়া উপাদান তৈরি করা ব্যয়বহুল হতে পারে। পরিবর্তে এই র‌্যাপারগুলি শুরুতে কল করা উচিত।

---

নোট করুন যে উপরের মতো ক্রিয়ামূলক উপাদানগুলি ব্যবহার করার সময়, এইচওসি সংস্করণটি কোনও কার্যকর অপ্টিমাইজেশন সরবরাহ করে না কারণ স্টেটলেস ফাংশনাল উপাদানগুলি প্রয়োগ করে না shouldComponentUpdate

এখানে আরও ব্যাখ্যা: https://stackoverflow.com/a/31564812/82609

Answer 3

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

Comments

এটি যদি সঠিক হয় তবে ... 15.x প্রতিক্রিয়া আপনাকে মাল্টি-নোড উপাদান ফেরত দিতে অস্বীকার করে। প্রতিক্রিয়া 16 (ওরফে রিঅ্যাক্ট ফাইবার) একাধিক নোডের অনুমতি দেবে। আপনার কোডের নমুনার জন্য এখানে ফিক্স রয়েছে: কনটেন্ট প্যারেন্টকম্পোনেন্ট = (প্রপস) => ({প্রপস.চাইল্ড কম্পোনেন্ট}); //... থেকে মাই কম্পোম্পোনেন্টটি আমদানি করুন যে কোনও সময়ই মাইকমম্পোনেন্ট = <মাইকম্পোনেন্ট /> // প্রপস হিসাবে পাস করুন <প্যারেন্টকম্পোনেন্ট চাইল্ড কম্পোনেন্ট = {মাইকম্পোনেন্ট} />

— অ্যান্ড্রু অলব্রাইট

Answer 4

ফেসবুক স্টেটলেস উপাদান ব্যবহারের প্রস্তাব দেয় উত্স: https://facebook.github.io/react/docs/reusable-components.html

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

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);

Answer 5

আপনি এটিকে সাধারণ প্রপ হিসাবে পাস করতে পারেন: foo={<ComponentOne />}

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

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>

Answer 6

আমি বিল্ট-ইন এপিআই ব্যবহার পছন্দ করি:

import React, {cloneElement, Component} from "react";
import PropTypes from "prop-types";

export class Test extends Component {
  render() {
    const {children, wrapper} = this.props;
    return (
      cloneElement(wrapper, {
        ...wrapper.props,
        children
      })
    );
  }
}

Test.propTypes = {
  wrapper: PropTypes.element,
  // ... other props
};

Test.defaultProps = {
  wrapper: <div/>,
  // ... other props
};

তারপরে আপনি যা যা চান তার সাথে র‌্যাপার ডিভি প্রতিস্থাপন করতে পারেন:

<Test wrapper={<span className="LOL"/>}>
  <div>child1</div>
  <div>child2</div>
</Test> 

Answer 7

আপনি মাধ্যমে একটি উপাদান পাস করতে পারেন। প্রপস এবং এলোমেলো সঙ্গে রেন্ডার।

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

এর পরে আপনি একটি মধ্যে পাস হবে propনামক child, যা একটি উপাদান প্রতিক্রিয়া হবে।

Comments

এটি শিশুদের চেয়ে গুণাবলীর মাধ্যমে উপাদানগুলি পাস করার দিকে পরিচালিত করবে। আপনি যদি this.props.childrenঅন্য উত্তরে প্রস্তাবিত হিসাবে ব্যবহার করেন, আপনি অ্যাটর্সের পরিবর্তে বাচ্চাদের শিশু হিসাবে লিখতে পারেন।

— রস অ্যালেন

@ এসোরালালেন আপনি বলেননি যে কেন কোনওভাবেই ভাল is

— রিটার্নেক্স

আপনি জেএসএক্সে ব্যবহার করেন এমন প্রতিটি উপাদান কেবল একটি উপাদান। যদি তারা এই পদ্ধতির ব্যবহার করে তবে আপনি আপনার সংক্ষিপ্ত উদাহরণটিও লিখতে পারবেন না। এটা হয়ে যাবে <div child={this.props.child />।

— রস অ্যালেন

জাভাস্ক্রিপ্ট সংস্করণটি পরীক্ষা করুন (জেএসএক্স এটিকে কী রূপ দেয়): jsfiddle.net/ssorallen/kvrxcqv8/2 । React.DOM.divমূল উপাদানগুলির মতো, childrenঅ্যারে ব্যবহার করে । এটি আপনার Helloউপাদানটিতে কীভাবে ব্যবহৃত হয়েছে তা দেখুন, এটি ইতিমধ্যে একাধিক শিশু ব্যবহার করছে।

— রস অ্যালেন

চ্যাটে আলোচনা চালিয়ে যাওয়ার নেতিবাচক দিকটি হ'ল তারা ভবিষ্যতের পাঠকদের জন্য সংরক্ষণাগারভুক্ত হয় না।

— আলট্রাফেজ

Answer 8

গেমটি দেরীতে, তবে কোনও উপাদানটিকে প্রোপ হিসাবে সরবরাহ করে ওভাররাইড করার জন্য এখানে একটি শক্তিশালী এইচওসি প্যাটার্ন। এটি সহজ এবং মার্জিত।

ধরুন MyComponentএকটি কাল্পনিক উপস্থাপনা Aউপাদান কিন্তু আপনি একটি কাস্টম ওভাররাইডের জন্য অনুমতি দিতে চান Aএই উদাহরণে, Bযা গোপন, Aএকটি <div>...</div>এবং appends "!" টেক্সট প্রোপ:

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);

Answer 9

প্রকৃতপক্ষে, আপনার প্রশ্নটি হায়ার অর্ডার কম্পোনেন্ট (এইচওসি) কীভাবে লিখবেন। এইচওসি ব্যবহারের মূল লক্ষ্য হ'ল অনুলিপি-আটকা দেওয়া। আপনি আপনার এইচওসিটিকে নিখুঁত কার্যকরী উপাদান হিসাবে বা একটি শ্রেণি হিসাবে এখানে লিখতে পারেন একটি উদাহরণ:

    class Child extends Component {
    render() {
        return (
            <div>
                Child
            </div>
        );
    }
}

আপনি যদি ক্লাস-ভিত্তিক উপাদান হিসাবে আপনার পিতামাতার উপাদানটি লিখতে চান:

    class Parent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

আপনি যদি পিতামাতাকে একটি কার্যকরী উপাদান হিসাবে লিখতে চান তবে:

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}

Answer 10

এখানে প্যারেন্ট লিস্টের প্রতিক্রিয়া উপাদানটির একটি উদাহরণ রয়েছে এবং কারা প্রপসগুলিতে একটি প্রতিক্রিয়া উপাদান থাকে। এই ক্ষেত্রে, কেবলমাত্র একটি লিঙ্ক প্রতিক্রিয়াযুক্ত উপাদানটি পাস হবে (ডোম রেন্ডারে যেমন দেখা যায়)।

class Link extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <p>{this.props.name}</p>
      </div>
     );
  }
}
class List extends React.Component {
  render(){
   return(
    <div>
       {this.props.element}
       {this.props.element}
    </div>
   );
  }
}

ReactDOM.render(
  <List element = {<Link name = "working"/>}/>,
  document.getElementById('root')
);

Answer 11

হ্যাঁ আপনি প্রপস ব্যবহার করে এটি করতে পারেন আপনি প্রপসের মতো কোনও উপাদান হিসাবে উপাদানটির ডেটা পাস করতে পারেন এবং তারপরে উপাদানটির অভ্যন্তরে আপনি অন্য উপাদানটি আমদানি করতে পারেন এবং প্রেপ্পস ডেটার সাথে গতিশীলভাবে বাঁধতে পারেন। প্রতিক্রিয়া উপাদান সম্পর্কে আরও পড়ুন

Comments

আপনি পোস্ট করা লিঙ্কটি থেকে কিছু কোড দিয়ে বিস্তারিত বর্ণনা করতে পারেন

— নেলস