Prismic.ioをCMSとして使用しており、このデータをgetInitialProps()
で取得しています。 コンテンツはHTMLとして事前にフォーマットされているため、 dangerouslySetInnerHTML
ます。
render()
の出力は、サーバーとクライアントで実行した場合と同じです。
サーバーでのrender()
の出力が間違っており、クライアントと一致しません。
違いは、DOMノードが適切にネストされていないため、サーバー上でコンテンツのスタイルが適切でないことです。
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 :
@flybayer報告してくれてありがとう。 私が間違っていることが、HTMLバリデータを通して、あなたシスを渡すと、私は、この電子与え可能性がrrorhttps:?HTTPS%3A%2F%2Fthefaithnet-ynikfpghwu.now.sh%2F = //validator.w3.org/nu/ドキュメント私がいるためだと思うがHTMLのネストでは、 p
タグは無効です。 外側のp
代わりにdivを使用してみてください。
@impronunciableうわー、それでした!
良いキャッチ、そしてあなたの助けを本当にありがとう!
うまくいったことをうれしく思います!
日、2016年11月6日には、11:57 AMブランドンバイエル[email protected]
書きました:
@impronunciable https://github.com/impronunciableうわー、それでした!
良いキャッチ、そしてあなたの助けを本当にありがとう!
—
あなたが言及されたのであなたはこれを受け取っています。このメールに直接返信し、GitHubで表示してください
https://github.com/zeit/next.js/issues/213#issuecomment -258693902、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AAKHp5EvRuw2GOjOViKL0MjKr0Vrt65sks5q7gbtgaJpZM4KqaPT
。
最も参考になるコメント
@flybayer報告してくれてありがとう。 私が間違っていることが、HTMLバリデータを通して、あなたシスを渡すと、私は、この電子与え可能性がrrorhttps:?HTTPS%3A%2F%2Fthefaithnet-ynikfpghwu.now.sh%2F = //validator.w3.org/nu/ドキュメント私がいるためだと思うがHTMLのネストでは、
p
タグは無効です。 外側のp
代わりにdivを使用してみてください。