Estoy usando Prismic.io como CMS y obtengo estos datos en getInitialProps()
. El contenido está preformateado como HTML, por lo que estoy usando dangerouslySetInnerHTML
.
La salida de render()
es idéntica cuando se ejecuta en el servidor y en el cliente.
La salida de render()
en el servidor es incorrecta y no coincide con el cliente.
La diferencia es que el contenido no tiene el estilo adecuado en el servidor porque los nodos DOM no están anidados correctamente.
const htmlFor = (type) => ({__html: this.props[type]})
<Article heading="Devotional" html={true} >
{htmlFor('devotional')}
</Article>
y
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>
)
Esta implementación y /_src
son públicos aquí: https://thefaithnet-ynikfpghwu.now.sh/
@flybayer gracias por informar. Podría estar equivocado, pero pasar tu sith a través de un validador de HTML me da este error https: //validator.w3.org/nu/? Doc = https% 3A% 2F% 2Fthefaithnet-ynikfpghwu.now.sh% 2F Creo que es porque en HTML, las etiquetas p
no son válidas. ¿Puedes intentar usar un div en lugar del p
externo?
@impronunciable ¡ Guau, eso fue todo!
¡Buen partido y muchas gracias por tu ayuda!
¡Me alegro de que haya funcionado!
El domingo 6 de noviembre de 2016 a las 11:57 a.m. Brandon Bayer [email protected]
escribió:
@impronunciable https://github.com/impronunciable ¡ Vaya, eso fue todo!
¡Buen partido y muchas gracias por tu ayuda!
-
Recibes esto porque te mencionaron.Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/zeit/next.js/issues/213#issuecomment -258693902, o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AAKHp5EvRuw2GOjOViKL0MjKr0Vrt65sks5q7gbtgaJpZM4KqaPT
.
Comentario más útil
@flybayer gracias por informar. Podría estar equivocado, pero pasar tu sith a través de un validador de HTML me da este error https: //validator.w3.org/nu/? Doc = https% 3A% 2F% 2Fthefaithnet-ynikfpghwu.now.sh% 2F Creo que es porque en HTML, las etiquetas
p
no son válidas. ¿Puedes intentar usar un div en lugar delp
externo?