पहले घटक की सामग्री को स्थानांतरित करने के लिए एक अन्य प्रतिक्रिया घटक में एक प्रतिक्रिया घटक में कैसे पारित करें?

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 का हिस्सा है और इस तरह से उपयोग किए जाने की उम्मीद है। रिएक्ट टीम के उदाहरण इस तकनीक का उपयोग करते हैं, जैसे कि प्रॉप्स को स्थानांतरित करने और जब एक एकल बच्चे के बारे में बात करते हैं ।

— रॉस एलन

नीचे मेरी टिप्पणी से: इसे एक प्रस्ताव के रूप में पारित करके आप इसे एक नाम भी दे सकते हैं और चेक टाइप करने के लिए प्रोपटीज़ का उपयोग कर सकते हैं।

— वापसी

@AndrewAllbright: आपका उदाहरण किसी भी बच्चे को नहीं दे रहा है। यह काम करता है: codepen.io/ssorallen/pen/Dyjmk

— रॉस एलन

और यदि आप तब बच्चों के 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/>}/>

---

प्रारंभिक आवरण / एचओसी

आप एक उच्च आदेश घटक (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);

यह (थोड़ा) बेहतर प्रदर्शन का कारण बन सकता है क्योंकि आवरण घटक शॉर्ट-सर्किट प्रदान कर सकता है जो कि एक कदम आगे बढ़ते हुए shouldComponentUpdate के साथ होना चाहिए, जबकि एक रनरअप रैपर के मामले में, बच्चों का प्रोप हमेशा एक अलग पुनर्संरचना होने और पुन: रेंडर करने का कारण बनता है। यहां तक ​​कि अगर आपके घटक PureComponent का विस्तार करते हैं।

ध्यान दें कि connectRedux एक रनवे रैपर हुआ करता था लेकिन उसे HOC में बदल दिया गया था क्योंकि यदि आप pureविकल्प का उपयोग करते हैं (जो डिफ़ॉल्ट रूप से सही है) तो यह बेकार री-रेंडरर्स से बचने की अनुमति देता है

रेंडर चरण के दौरान आपको कभी भी एचओसी को कॉल नहीं करना चाहिए क्योंकि रिएक्ट घटक बनाना महंगा हो सकता है। बल्कि आपको इन रैपरों को इनिशियलाइज़ेशन पर कॉल करना चाहिए।

---

ध्यान दें कि ऊपर जैसे कार्यात्मक घटकों का उपयोग करते समय, HOC संस्करण कोई उपयोगी अनुकूलन प्रदान नहीं करता है, क्योंकि स्टेटलेस कार्यात्मक घटक लागू नहीं होते हैं 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 (उर्फ रिएक्ट फाइबर) कई नोड्स की अनुमति देगा। यहाँ आपके कोड नमूने के लिए ठीक है: const ParentComponent = (props) => ({props.childComponent}); आयात करें MyComponent // से..जहाँ कभी const myComponent = <MyComponent /> // पास के रूप में प्रोप करें <ParentComponent childComponent = {myComponent} />

— एंड्रयू Allbright

Answer 4

फेसबुक स्टेटलेस कंपोनेंट यूसेज की सिफारिश करता है सोर्स: https://facebook.github.io/react/docs/reusable-compens.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
};

फिर आप रैपर div को कभी भी अपनी पसंद से बदल सकते हैं:

<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किसी अन्य उत्तर में सुझाए गए अनुसार उपयोग करते हैं , तो आप बच्चों के बजाय बच्चों के रूप में लिख सकते हैं।

— रॉस एलन

@ लॉरेलन आपने यह नहीं बताया कि किसी भी तरह से बेहतर क्यों है ... इसे एक प्रस्ताव के रूप में पारित करके आप इसे एक नाम भी दे सकते हैं और चेक टाइप करने के लिए PropTypes का उपयोग कर सकते हैं।

— लौटने वाली

JSX में आपके द्वारा उपयोग किया जाने वाला प्रत्येक तत्व सिर्फ एक घटक है। यदि वे इस दृष्टिकोण का उपयोग करते हैं, तो आप अपना संक्षिप्त उदाहरण भी नहीं लिख पाएंगे। यह बन जाएगा <div child={this.props.child />।

— रॉस एलन

जावास्क्रिप्ट संस्करण देखें (जेएसएक्स इसे किस रूप में बदल देता है): jsfiddle.net/ssorallen/kvrxcqv8/2 । React.DOM.div, सभी मुख्य घटकों की तरह, childrenसरणी का उपयोग करता है । यह देखें कि आपके Helloघटक में इसका उपयोग कैसे किया जाता है , यह पहले से ही कई बच्चों का उपयोग कर रहा है।

— रॉस एलन

चैट में चर्चा जारी रखने के लिए नकारात्मक पक्ष यह है कि वे भविष्य के पाठकों के लिए संग्रहीत नहीं होते हैं।

— 15

Answer 8

खेल के लिए देर है, लेकिन यहाँ एक प्रस्ताव के रूप में प्रदान करके एक घटक को ओवरराइड करने के लिए एक शक्तिशाली एचओसी पैटर्न है। यह सरल और सुरुचिपूर्ण है।

मान लीजिए कि MyComponentएक काल्पनिक Aघटक है, लेकिन आप Aइस उदाहरण में एक कस्टम ओवरराइड के लिए अनुमति देना चाहते हैं B, जो Aएक में लपेटता है <div>...</div>और "भी!" पाठ प्रोप करने के लिए:

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

दरअसल, आपका सवाल यह है कि हायर ऑर्डर कंपोनेंट (HOC) कैसे लिखें। एचओसी का उपयोग करने का मुख्य लक्ष्य कॉपी-पेस्टिंग को रोकना है। आप अपने एचओसी को विशुद्ध रूप से कार्यात्मक घटक के रूप में लिख सकते हैं या एक वर्ग के रूप में यहां एक उदाहरण है:

    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

हां, आप इसे प्रॉप्स का उपयोग करके कर सकते हैं आप घटक के डेटा को प्रॉपर की तरह ऑब्जेक्ट के रूप में पास कर सकते हैं और फिर घटक के अंदर आप किसी अन्य घटक को आयात कर सकते हैं और prpps डेटा के साथ गतिशील रूप से बाइंड कर सकते हैं। प्रतिक्रिया घटक के बारे में अधिक पढ़ें

Comments

क्या आप पोस्ट किए गए लिंक से कुछ कोड के साथ विस्तृत कर सकते हैं

— नेल्स