Metni HTML etiketleriyle iletebilmek istiyorum, örneğin:

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

Ancak MyComponentrender yönteminin içinde, yazdırdığımda this.props.text, kelimenin tam anlamıyla her şeyi yazdırıyor:

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

React'in HTML'yi ayrıştırıp düzgün bir şekilde atmasını sağlamanın bir yolu var mı?

Sen dizeleri ve JSX elemanları (docs bkz ile karışık diziler kullanabilirsiniz burada ):

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

Burada çalıştığını gösteren bir keman var: http://jsfiddle.net/7s7dee6L/

Ayrıca, son çare olarak, her zaman ham HTML ekleme yeteneğiniz vardır, ancak dikkatli olun çünkü bu, özellik değerlerini temizlemiyorsanız sizi siteler arası komut dosyası (XSS) saldırısına açabilir.

Aslında bununla gitmenin birden fazla yolu var.

Sahne donanımınızın içinde JSX kullanmak istiyorsunuz

JSX'in parametreyi ayrıştırmasına neden olmak için {} kullanabilirsiniz. Tek sınırlama, her JSX öğesi ile aynıdır: Yalnızca bir kök öğe döndürmelidir.

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

Bunu yapmanın en iyi okunabilir yolu, JSX bileşenlerini döndürecek bir renderMyProp işlevi oluşturmaktır (standart oluşturma işlevi gibi) ve ardından myProp = {this.renderMyProp ()}

Bir dizge olarak yalnızca HTML'yi geçirmek istiyorsunuz

Varsayılan olarak JSX, dize değerlerinden ham HTML oluşturmanıza izin vermez. Ancak bunu yapmanın bir yolu var:

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

Ardından bileşeninizde şu şekilde kullanabilirsiniz:

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

Bu çözümün siteler arası kodlama sahteciliği saldırılarında açılabileceğine dikkat edin. Ayrıca, yalnızca basit HTML oluşturabileceğinizden, JSX etiketi veya bileşeni veya diğer süslü şeyler yapamayacağınıza dikkat edin.

Dizi yolu

React'te, bir dizi JSX öğesi iletebilirsiniz. Bunun anlamı:

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

Bu yöntemi tavsiye etmem çünkü:

• Bir uyarı oluşturacak (eksik anahtarlar)
• Okunabilir değil
• Bu gerçekten JSX yolu değil, amaçlanan bir tasarımdan çok bir hack.

Çocukların yolu

Eksiksizlik uğruna ama tepki olarak, bileşeninizin 'içindeki' tüm çocukları da alabilirsiniz.

Yani aşağıdaki kodu alırsam:

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

Daha sonra iki div, SomeComponent içinde this.props.children olarak kullanılabilir ve standart {} sözdizimi ile işlenebilir.

Bu çözüm, Bileşeninize aktarılacak yalnızca bir HTML içeriğiniz olduğunda mükemmeldir (yalnızca Popin'in içeriğini alt öğe olarak alan bir Popin bileşeni düşünün).

Bununla birlikte, birden fazla içeriğiniz varsa, çocukları kullanamazsınız (veya en azından burada başka bir çözümle birleştirmeniz gerekir)

Tehlikeli olarak kullanabilirsinSetInnerHTML

Sadece html'yi normal bir dize olarak gönderin

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

Ve JSX kodunda şu şekilde işleyin:

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

Kullanıcı tarafından girilen verileri işliyorsanız dikkatli olun. XSS saldırısının kurbanı olabilirsiniz

Belgeler şu şekildedir: https://facebook.github.io/react/tips/dangerously-set-inner-html.html

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

ve sonra bileşeninizde şu şekilde pervane kontrolü yapabilirsiniz:

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

Yalnızca bir pervane türü seçtiğinizden emin olun.

React v16.02'den bir Fragment kullanabilirsiniz.

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

Daha fazla bilgi: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Benim için, sahne çocuklarında html etiketi geçerek çalıştı

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


var MyComponent = React.createClass({

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

İstemci tarafındaki bir tepki uygulamasında, bir pervaneyi html ile dizge olarak oluşturmanın birkaç yolu vardır. Biri diğerinden daha güvenli ...

1 - pervaneyi jsx olarak tanımla (tercihim)

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


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

• Buradaki tek gereksinim, bu propu oluşturan dosya ne olursa olsun, bağımlılık olarak React'i içermesi gerektiğidir (bir yardımcı dosyada prop jsx'ini oluşturuyorsanız vb.).

2 - InternalHtml'yi tehlikeli bir şekilde ayarlayın

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

• Bu ikinci yaklaşım tavsiye edilmez. Bu bileşende girdi değeri bir prop olarak işlenen bir girdi alanı hayal edin. Bir kullanıcı girişe bir komut dosyası etiketi girebilir ve bu girişi oluşturan bileşen, bu potansiyel olarak kötü amaçlı kodu yürütür. Bu nedenle, bu yaklaşım siteler arası komut dosyası çalıştırma güvenlik açıkları oluşturma potansiyeline sahiptir. Daha fazla bilgi için resmi React belgelerine bakın

Metin pervanesi türünü herhangi birine ayarlayın ve bunu yapın:

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

Misal

Benim bildiğim 2 şekilde yapabilirsiniz.

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

Ve sonra bunu yap

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

Veya ikinci yaklaşım bunu böyle yap

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

Ve sonra bunu yap

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

@matagus cevabı benim için iyi, umarım snippet'in altında değişken kullanmak isteyenlere yardımcı olur.

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

Projemde değişkenden dinamik html parçacığı geçirip bileşen içinde render etmem gerekiyordu. Ben de aşağıdakileri yaptım.

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

defaultSelection nesnesi, .jsdosyadan bileşene aktarılır

<HtmlSnippet innerHtml={defaultSelection.innerHtml} />

HtmlSnippet bileşeni

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

Plunkr örneği

doc için hazardouslySetInnerHTML için tepki verin

Ayrıca jsx boyunca props'a geçmek için bileşen üzerinde bir işlev kullanabilirsiniz. sevmek:

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

});

Evet, dizeler ve JSX öğeleriyle karışık dizi kullanarak bunu yapabilirsiniz. referans

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

Den Ayrıştırıcı html reaksiyona-ayrıştırıcı iyi bir çözümdür. Sadece yapmalısın

• npm veya iplik ile kurun
• 'html-react-parser'dan ayrıştırıcıyı içe aktarın;

• şununla ara:

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

  ve iyi çalışıyor.

Yanıta ekleme: Ayrıştırmayı planlıyorsanız ve zaten JSX içindeyseniz ancak iç içe özelliklere sahip bir nesneye sahipseniz, JSX ayrıştırmasını zorlamak için çok zarif bir yol parantez kullanmaktır:

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

Bu sorunun zaten birçok cevabı var, ancak bununla ilgili yanlış bir şey yapıyordum ve paylaşmaya değer olduğunu düşünüyorum:

Bende bunun gibi bir şey vardı:

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

ama masaj bundan daha uzundu, bu yüzden şöyle bir şey kullanmayı denedim:

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

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

İşlev çağrısındaki () işaretini kaçırdığımı anlamam biraz zaman aldı.

Çalışmıyor

<Section message={message} />

Çalışma

<Section message={message()} />

bana yaptığı gibi belki bu sana yardımcı olur!

Bu görev için React parçalarını başarıyla kullanabilirsiniz . Kullandığınız React sürümüne bağlı olarak, kısa sözdizimi: <>veya tam etiket: kullanabilirsiniz <React.Fragment>. Tüm dizeyi HTML etiketlerine sarmak istemiyorsanız özellikle iyi çalışır.

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

Aynı şeyi bu şekilde yapabiliriz.

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

şimdi bu HTML'yi, adı Üst bileşen olan başka bir bileşenin içine göndermek istiyorsunuz.

Arıyor: -

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

Çocuk Kullanımı: -

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

bu benim için mükemmel çalışıyor.

JQuery ekini kullanarak componentDidMount'a html'yi eklediniz. Bu sorunu çözmelidir.

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

        return (
           <div>

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