Next.js: सर्वर `खतरनाक रूप से सेटइनरएचटीएमएल` का उपयोग करते समय ठीक से प्रस्तुत नहीं कर रहा है

को निर्मित 5 नव॰ 2016  ·  3टिप्पणियाँ  ·  स्रोत: vercel/next.js

पृष्ठभूमि

मैं एक सीएमएस के रूप में Prismic.io का उपयोग कर रहा हूं और इस डेटा को getInitialProps() में ला रहा हूं। सामग्री HTML के रूप में पूर्व-स्वरूपित है इसलिए मैं dangerouslySetInnerHTML का उपयोग कर रहा हूं।

अपेक्षित् व्यवहार

सर्वर और क्लाइंट पर निष्पादित होने पर render() का आउटपुट समान होता है।

वास्तविक व्यवहार

सर्वर पर render() का आउटपुट गलत है और क्लाइंट से मेल नहीं खाता है।

सर्वर से प्रस्तुत करना:

image

ग्राहक से प्रस्तुत करना

image

अंतर यह है कि सामग्री की सर्वर पर उचित शैली नहीं है क्योंकि DOM नोड्स ठीक से नेस्टेड नहीं हैं।

सर्वर से डोम:

image

क्लाइंट से डोम:

image

प्रासंगिक कोड

const htmlFor = (type) => ({__html: this.props[type]})
<Article heading="Devotional" html={true} >
   {htmlFor('devotional')}
</Article>

तथा

const Article = ({heading, children, date, link, style, html}) => (
  <article
    className="mv3 mv4-m mv5-l measure"
    style={style}
  >
    <header>
      <h1 className="f3 f2-ns mt0 lh-title i garamond bb bw3 b--gold">
        {heading}
      </h1>
    </header>
    { html
      ? <p className="lh-copy" dangerouslySetInnerHTML={children} />
      : <p className="lh-copy" >{children}</p>
    }

    <footer>
      { date
        ? <p className="f6 i">{date}</p>
        : null
      }
      {link
        ? <a href="#" className='link dim mid-gray bb b--gold'>
            {link}
          </a>
        : null
      }
    </footer>
  </article>
)

और जानकारी

यह परिनियोजन और /_src यहां सार्वजनिक हैं: https://thefaithnet-ynikfpghwu.now.sh/

सबसे उपयोगी टिप्पणी

@flybayer रिपोर्टिंग के लिए धन्यवाद। मैं गलत हो सकता था लेकिन एक HTML सत्यापनकर्ता के माध्यम से आपके सिथ को पास करने से मुझे यह त्रुटि मिलती हैhttps://validator.w3.org/nu/?doc=https%3A%2F%2Fthefaithnet-ynikfpghwu.now.sh%2F मुझे लगता है क्योंकि HTML नेस्टिंग में p टैग मान्य नहीं है। क्या आप बाहरी p बजाय div का उपयोग करने का प्रयास कर सकते हैं?

सभी 3 टिप्पणियाँ

@flybayer रिपोर्टिंग के लिए धन्यवाद। मैं गलत हो सकता था लेकिन एक HTML सत्यापनकर्ता के माध्यम से आपके सिथ को पास करने से मुझे यह त्रुटि मिलती हैhttps://validator.w3.org/nu/?doc=https%3A%2F%2Fthefaithnet-ynikfpghwu.now.sh%2F मुझे लगता है क्योंकि HTML नेस्टिंग में p टैग मान्य नहीं है। क्या आप बाहरी p बजाय div का उपयोग करने का प्रयास कर सकते हैं?

@improunciable वाह, वह था!

अच्छी पकड़, और आपकी मदद के लिए बहुत बहुत धन्यवाद!

खुशी है कि यह काम किया!

रविवार को, 6 नवंबर, 2016, 11:57 AM ब्रैंडन बायर नोटिफिकेशन @github.com
लिखा था:

@improunciable https://github.com/improunciable वाह, बस इतना ही!

अच्छी पकड़, और आपकी मदद के लिए बहुत बहुत धन्यवाद!

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।

इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/zeit/next.js/issues/213#issuecomment -258693902, या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AAKHp5EvRuw2GOjOViKL0MjKr0Vrt65sks5q7gbtgaJpZM4KqaPT
.

क्या यह पृष्ठ उपयोगी था?
0 / 5 - 0 रेटिंग्स