118

मैं HTML टैग के साथ पाठ को पारित करने में सक्षम होना चाहता हूं, जैसे:

<MyComponent text="This is <strong>not</strong> working." />

लेकिन अंदर की MyComponentविधि सौंपनेवाला, जब मैं बाहर प्रिंट this.props.text, यह सचमुच सब कुछ प्रिंट:

This is <strong>not</strong> working.

क्या रिएक्ट पार्स HTML बनाने और इसे ठीक से डंप करने का कोई तरीका है?

reactjs

— ffxsam
स्रोत

आपका वास्तविक रेंडर फंक्शन क्या है?

— लूसियो

3

सामान्य पैटर्न यह होगा कि आप अपनी सामग्री को अपने घटक के बच्चों को बनाने के <MyComponent>This is not working</MyComponent>बजाय, उन्हें प्रॉपर के रूप में पास करें। क्या आप वास्तव में पूरा करने की कोशिश कर रहे हैं पर अधिक संदर्भ दे सकते हैं?

— निक टॉमलिन

लगभग एक ही सवाल: Reactjs HTML में परिवर्तित होते हैं ।

— टोटमेडली

140

आप स्ट्रिंग्स और JSX तत्वों के साथ मिश्रित सरणियों का उपयोग कर सकते हैं (डॉक्स यहां देखें ):

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

यहाँ एक फिडेल है जो इसे काम करता हुआ दिखाता है: http://jsfiddle.net/7s7dee6L/

इसके अलावा, अंतिम उपाय के रूप में, आपके पास हमेशा कच्चे HTML सम्मिलित करने की क्षमता होती है , लेकिन सावधान रहें क्योंकि यह आपको संपत्ति के मानों को सीमित नहीं करने पर क्रॉस-साइट स्क्रिप्टिंग (XSS) हमले तक खोल सकता है।

— matagus
स्रोत

10

यह काम करता है, सिवाय इसके कि मुझे अब एक चेतावनी मिले: चेतावनी: एक सरणी या पुनरावृत्त में प्रत्येक बच्चे के पास एक अद्वितीय "कुंजी" प्रोप होना चाहिए। CTA की रेंडर विधि की जाँच करें। इसे Template1 से एक बच्चा पास किया गया था। अधिक जानकारी के लिए fb.me/react-warning-keys देखें ।

— ffxsam

3

आप सरणी के माध्यम से जाकर और MyComponent में कुंजी के रूप में अनुक्रमणिका जोड़कर इस त्रुटि को दूर कर सकते हैं {text.map( textOrHTML, index) => {textOrHTML} )} , हालांकि, यह सिर्फ इतना अजीब है कि हमें इसे पूरी तरह से पहले स्थान पर करना होगा।

— हुसैनके

5

आप तत्व key="[some unique value]"पर रखकर चेतावनी को भी ठीक कर सकते हैं ।

— चाड जॉनसन

अच्छा है, ठीक काम कर रहा हूं, मैं जानना चाहूंगा कि मैं स्ट्रिंग के बजाय मजबूत के अंदर एक चर का उपयोग कैसे कर सकता हूं

— जैसन

2

सरणी कुंजी चेतावनी को हटाने के लिए, अब इस तरह से एक एकल JSX पास करना भी संभव है। <MyComponent text={<>This is not working.</>} />

— आरिफ

111

दरअसल, इसके साथ कई तरीके हैं।

आप अपने प्रॉप के अंदर JSX का उपयोग करना चाहते हैं

जेएसएक्स को पैरामीटर को पार्स करने के लिए आप बस {} का उपयोग कर सकते हैं। एकमात्र सीमा हर JSX तत्व के समान है: इसे केवल एक मूल तत्व वापस करना होगा।

myProp={<div><SomeComponent>Some String</div>}

इसके लिए जाने के लिए सबसे अच्छा पठनीय तरीका एक फ़ंक्शन रेंडर मायप्रॉप बनाना है जो जेएसएक्स घटकों (मानक रेंडर फ़ंक्शन की तरह) को वापस करेगा और फिर myProp = {this.renderMyProp ()} पर कॉल करें।

आप एक स्ट्रिंग के रूप में केवल HTML पास करना चाहते हैं

डिफ़ॉल्ट रूप से, JSX आपको स्ट्रिंग मानों से कच्चा HTML रेंडर नहीं करने देता है। हालाँकि, ऐसा करने का एक तरीका है:

myProp="<div>This is some html</div>"

फिर अपने घटक में आप इसे इस तरह उपयोग कर सकते हैं:

<div dangerouslySetInnerHTML=myProp={{ __html: this.renderMyProp() }}></div>

खबरदार कि यह समाधान 'क्रॉस-साइट स्क्रिप्टिंग फॉरगरीज हमलों पर खुल सकता है। यह भी सावधान रहें कि आप केवल साधारण HTML, कोई JSX टैग या घटक या अन्य फैंसी चीजें ही प्रस्तुत कर सकते हैं।

सरणी तरीका है

प्रतिक्रिया में, आप JSX तत्वों की एक सरणी पास कर सकते हैं। इसका मत:

myProp={["This is html", <span>Some other</span>, "and again some other"]}

मैं इस विधि की सिफारिश नहीं करूंगा क्योंकि:

यह एक चेतावनी (गुम कुंजियाँ) बनाएगा
यह पठनीय नहीं है
यह वास्तव में JSX तरीका नहीं है, यह एक इच्छित डिज़ाइन की तुलना में अधिक हैक है।

बच्चों को रास्ता

पूर्णता के लिए इसे जोड़ना लेकिन प्रतिक्रिया में, आप उन सभी बच्चों को भी प्राप्त कर सकते हैं जो आपके घटक के 'अंदर' हैं।

तो अगर मैं निम्नलिखित कोड ले:

<SomeComponent>
    <div>Some content</div>
    <div>Some content</div>
</SomeComponent>

तो दो divs उपलब्ध हो जाएगा। यह SomeComponent में props.children और मानक {सिंटैक्स के साथ प्रदान किया जा सकता है।

यह समाधान तब सही होता है जब आपके पास अपने कंपोनेंट को पास करने के लिए केवल एक एचटीएमएल कंटेंट होता है (इमेजिन ए पोपिन कंपोनेंट जो केवल पॉपिन की सामग्री को बच्चों की तरह लेता है)।

हालाँकि, यदि आपके पास कई सामग्री हैं, तो आप बच्चों का उपयोग नहीं कर सकते हैं (या आपको इसे किसी अन्य समाधान के साथ यहाँ संयोजित करने के लिए कम से कम आवश्यकता है)

— Atrakeur
स्रोत

1

this.props.childrens - लेकिन this.props.children। बिना 's' reactjs.org/docs/glossary.html#propschildren

— Alexiuscrow

13

आप खतरनाक तरीके से उपयोग कर सकते हैं

बस html को एक सामान्य स्ट्रिंग के रूप में भेजें

<MyComponent text="This is <strong>not</strong> working." />

और इस तरह JSX कोड में रेंडर करें:

<h2 className="header-title-right wow fadeInRight"
    dangerouslySetInnerHTML={{__html: props.text}} />

बस सावधान रहें यदि आप उपयोगकर्ता द्वारा दर्ज किए गए डेटा प्रदान कर रहे हैं। आप XSS के हमले के शिकार हो सकते हैं

यहाँ प्रलेखन है: https://facebook.github.io/react/tips/dangerously-set-inner-html

— hecontreraso
स्रोत

7

<MyComponent text={<span>This is <strong>not</strong> working.</span>} />

और फिर अपने कंपोनेंट में आप प्रॉपर चेकिंग कर सकते हैं जैसे:

import React from 'react';
export default class MyComponent extends React.Component {
  static get propTypes() {
    return {
      text: React.PropTypes.object, // if you always want react components
      text: React.PropTypes.any, // if you want both text or react components
    }
  }
}

सुनिश्चित करें कि आप केवल एक प्रोप प्रकार चुनें।

6

मेरे लिए यह प्रॉपर बच्चों में html टैग पास करके काम करता है

<MyComponent>This is <strong>not</strong> working.</MyComponent>


var MyComponent = React.createClass({

   render: function() {
    return (
      <div>this.props.children</div>
    );
   },

— Shashi3456643
स्रोत

6

React v16.02 से आप एक फ्रैगमेंट का उपयोग कर सकते हैं।

<MyComponent text={<Fragment>This is an <strong>HTML</strong> string.</Fragment>} />

अधिक जानकारी: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

— RynoRn
स्रोत

6

क्लाइंट-साइड रिएक्शन एप्लिकेशन पर, कुछ html के साथ एक स्ट्रिंग के रूप में एक प्रोप प्रदान करने के कुछ तरीके हैं। एक से बढ़कर एक सुरक्षित ...

1 - jsx (मेरी प्राथमिकता) के रूप में प्रोप को परिभाषित करें

const someProps = {
  greeting: {<div>Hello<a href="/${name_profile}">${name_profile}</a></div>}
}


const GreetingComopnent = props => (
  <p>{props.someProps.greeting}</p>
)

• यहाँ केवल आवश्यकता यह है कि जो भी फ़ाइल इस प्रोप को जेनरेट कर रही है उसमें रिएक्ट को एक निर्भरता के रूप में शामिल करने की आवश्यकता है (यदि आप किसी हेल्पर फ़ाइल आदि में प्रोप का jsx उत्पन्न कर रहे हैं)।

2 - खतरनाक तरीके से इनरहेटलएम सेट करें

const someProps = {
  greeting: '<React.Fragment>Hello<a href="https://stackoverflow.com/${name_profile}">${name_profile}</a></React.Fragment>'
}

const GreetingComponent = props => {
  const innerHtml = { __html: props.someProps.greeting }
  return <p dangerouslySetInnerHtml={innerHtml}></p>
}

• यह दूसरा तरीका हतोत्साहित करता है। एक इनपुट फ़ील्ड की कल्पना करें जिसका इनपुट मान इस घटक में एक प्रोप के रूप में प्रदान किया गया है। एक उपयोगकर्ता इनपुट में एक स्क्रिप्ट टैग दर्ज कर सकता है और घटक जो इस इनपुट को प्रस्तुत करता है वह इस संभावित दुर्भावनापूर्ण कोड को निष्पादित करेगा। जैसे, इस दृष्टिकोण में क्रॉस-साइट स्क्रिप्टिंग कमजोरियों को पेश करने की क्षमता है। अधिक जानकारी के लिए, आधिकारिक रिएक्ट डॉक्स देखें

— विजय सेल्वन राम
स्रोत

4

टेक्स्ट प्रोप प्रकार को किसी पर सेट करें और ऐसा करें:

<MyComponent text={
    <React.Fragment>
        <div> Hello, World!</div>
    </React.Fragment>
    } 
/>

उदाहरण

— अमेय परुंडेकर
स्रोत

3

आप इसे 2 तरीकों से कर सकते हैं जिससे मैं अवगत हूं।

1- <MyComponent text={This is not working.} />

और फिर ऐसा करें

class MyComponent extends React.Component {
   render () {
     return (<div>{this.props.text}</div>)
   }
}

या दूसरा दृष्टिकोण इसे इस तरह से करता है

2- <MyComponent>This is not working.<MyComponent/>

और फिर ऐसा करें

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

— अदील इमरान
स्रोत

1

मैंने एक चर जोड़ा और इसे let vhtml = "Test"इस तरह प्रोप पर इस्तेमाल किया text={vhtml}और यह अभी भी किसी कारण के लिए सादे पाठ में प्रदान किया गया।

— Si8

2

@matagus जवाब मेरे लिए ठीक है, आशा है कि स्निपेट के नीचे उन लोगों की मदद की जाती है जो अंदर एक चर का उपयोग करना चाहते हैं।

const myVar = 'not';
<MyComponent text={["This is ", <strong>{`${myVar}`}</strong>,  "working."]} />

— jaison
स्रोत

1

मेरे प्रोजेक्ट में मुझे डायनामिक html स्निपेट को वेरिएबल से पास करना था और इसे कंपोनेंट के अंदर रेंडर करना था। तो मैंने निम्नलिखित किया।

defaultSelection : {
    innerHtml: {__html: '<strong>some text</strong>'}
}

DefaultSelection ऑब्जेक्ट .jsफ़ाइल से घटक को पारित किया है

<HtmlSnippet innerHtml={defaultSelection.innerHtml} />

HtmlSnippet घटक

var HtmlSnippet = React.createClass({
  render: function() {
    return (
      <span dangerouslySetInnerHTML={this.props.innerHtml}></span>
    );
  }
});

प्लंकर का उदाहरण

ख़तरनाक़ रूप सेSetInnerHTML के लिए प्रतिक्रिया दें

— राजकिशोर साहू
स्रोत

1

आप प्रॉपर के माध्यम से jsx के साथ पारित करने के लिए घटक पर एक फ़ंक्शन का उपयोग भी कर सकते हैं। पसंद:

 var MyComponent = React.createClass({

   render: function() {
    return (
      <OtherComponent
        body={this.body}
      />
    );
   },

   body() {
     return(
       <p>This is <strong>now</strong> working.<p>
     );
   }

});

var OtherComponent = React.createClass({

  propTypes: {
    body: React.PropTypes.func
  },

  render: function() {
     return (
        <section>
          {this.props.body()}
        </section>
     );
  },

});

— एलीसन
स्रोत

1

हाँ, आप स्ट्रिंग्स और JSX तत्वों के साथ मिक्स ऐरे का उपयोग करके कर सकते हैं। संदर्भ

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

— ओसामा बारी
स्रोत

1

से पार्सर एचटीएमएल प्रतिक्रिया-पार्सर एक अच्छा समाधान है। बस तुम्हें यह करना होगा

इसे npm या यार्न के साथ स्थापित करें
'HTML- प्रतिक्रिया-पार्सर' से पार्सर आयात करें;
इसके साथ कॉल करें:
```
<MyComponent text=Parser("This is not working.") />
```
और यह अच्छी तरह से काम करता है।

— Franck212
स्रोत

1

उत्तर में जोड़ना: यदि आप पार्स करने का इरादा रखते हैं और आप पहले से ही JSX में हैं, लेकिन नेस्टेड गुणों के साथ एक ऑब्जेक्ट है, तो JSX पार्सिंग को बाध्य करने के लिए कोष्ठक का उपयोग करने का एक बहुत ही सुंदर तरीका है:

const TestPage = () => (
  <Fragment>
    <MyComponent property={
    {
      html: (
        <p>This is a <a href='#'>test</a> text!</p>
      )
    }}>
    </MyComponent>
  </Fragment>
);

— निक एल।
स्रोत

1

इस सवाल के पहले से ही बहुत सारे उत्तर हैं, लेकिन मैं इससे संबंधित कुछ गलत कर रहा था और मुझे लगता है कि यह साझा करने लायक है:

मेरे पास कुछ ऐसा था:

export default function Features() {
  return (
    <Section message={<p>This is <strong>working</strong>.</p>} />
  }
}

लेकिन मालिश इससे अधिक लंबी थी, इसलिए मैंने कुछ इस तरह का उपयोग करने की कोशिश की:

const message = () => <p>This longer message is <strong>not</strong> working.</p>;

export default function Features() {
  return (
    <Section message={message} />
  }
}

फ़ंक्शन कॉल में मुझे यह महसूस करने में थोड़ी देर लगी कि मैं () गायब था।

काम नहीं कर रहा

<Section message={message} />

काम कर रहे

<Section message={message()} />

शायद यह आपकी मदद करता है, जैसा कि मेरे साथ हुआ!

— अब्राहम हर्नांडेज़
स्रोत

1

आप इस कार्य के लिए प्रतिक्रिया टुकड़े का सफलतापूर्वक उपयोग कर सकते हैं । आपके द्वारा उपयोग किए जाने वाले रिएक्ट संस्करण के आधार पर, आप छोटे सिंटैक्स का उपयोग कर सकते हैं: <>या पूर्ण टैग <React.Fragment>:। विशेष रूप से अच्छी तरह से काम करता है यदि आप HTML टैग के भीतर पूरे स्ट्रिंग को लपेटना नहीं चाहते हैं।

<MyComponent text={<>Hello World. <u>Don't be so ruthless</u>.</>} />

— चक्रवात
स्रोत

0

हम इस तरह से एक ही काम कर सकते हैं।

const Child = () => {
  return (
     write your whole HTML here.
  )
}

अब आप इस HTML को किसी अन्य घटक के अंदर भेजना चाहते हैं जिसका नाम मूल घटक है।

कॉलिंग: -

<Parent child={<child/>} >
</Parent>

बच्चे का उपयोग: -

 const Parent = (props) => {
   const { child } = props; 
   return (
       {child}
    )
}

यह काम मेरे लिए एकदम सही है।

— pushparmar
स्रोत

-9

JQuery परिशिष्ट का उपयोग कर कंपोनेंटडिमाउंट में HTML को जोड़ दिया है। इससे समस्या हल हो जानी चाहिए।

 var MyComponent = React.createClass({
    render: function() {

        return (
           <div>

           </div>
        );
    },
    componentDidMount() {
        $(ReactDOM.findDOMNode(this)).append(this.props.text);
    }
});

— कौशिक
स्रोत

5

यह नीचे मतदान है क्योंकि आपको jquery के प्रत्यक्ष DOM हेरफेर का उपयोग प्रतिक्रिया के अप्रत्यक्ष DOM हेरफेर के साथ नहीं करना चाहिए, क्योंकि इससे ब्राउज़र थ्रैश हो सकता है।

— एलीसन

प्रतिक्रिया - कैसे सहारा में HTML टैग पारित करने के लिए?