javascript - node - react meaning in bengali



প্রথম কম্পোনেন্টের কন্টেন্টটি সরাতে অন্য প্রতিক্রিয়া উপাদানটিতে একটি প্রতিক্রিয়া উপাদানটিতে কীভাবে পাস করবেন? (6)

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

সম্পাদনা: এখানে একটি reactJS কোডপেন যা আমি যা করার চেষ্টা করছি তা বর্ণনা করে। 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

আপনি এটি একটি সাধারণ প্রপোজ হিসাবে পাস করতে পারেন: 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 #2

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

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

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


Answer #3

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

 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 #4

কম্পোনেন্টের যে কোনও শিশুকে রেন্ডার করতে আপনি এই this.props.children ব্যবহার করতে পারেন:

const Wrap = props => <div>{props.children}</div>

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

Answer #5

নোট আমি here আরও গভীরভাবে উত্তর প্রদান

রানটাইম wrapper:

এটা সবচেয়ে idiomatic উপায়।

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/>}/>

সূচনা মোড়ানো / এইচওসি

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

// 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);

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

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

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

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

আরো ব্যাখ্যা এখানে: here


Answer #6

ফেইসবুক স্টেটাইল উপাদান ব্যবহারের সুপারিশ: উত্স

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

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);




reactjs