Reactを使用したWordPressテンプレート。不適切な文字

Question

Reactを使用してWordPressテンプレートを作成しています。私はDBで完璧に見えるWPポストを持っています。サーバーからデータを取得するには、WordPressに含まれている新しいAPI機能を使用してAxiosを使用します。

axios.get('/paintings-project/wp-json/wp/v2/posts').then(
    function(response){ 
     self.setState({posts: response.data}) 
    } 
); 

これは、レンダリング時に記事のタイトルがどのように見えるかです：これは私がDBからタイトルを取得するために使用したコードがある

Hello world! I'm leaving 

：タイトルはDBにどのように見えるか

です：

Hello world! I’m leaving 

char 'がエスケープされ、エスケープに使用されるバックスラッシュがエンコードされます。

一方、HTMLコンテンツをポストからレンダリングすると、HTMLはHTMLとして表示される代わりに文字列として表示されます。このように：

<h1>Welcome&#8217; to WordPress&#8217;.</h1> <p><strong>This is your first post. Edit or delete it, then start writing!</strong></p> <p>&nbsp;</p>

私はWordPressのAPIはBEやFEにおける特別なエンコーディング/デコーディングを必要とせずにまっすぐに働くだろうと予想しました。私は何か間違っているのですか？

ありがとうございました

Answer 1

Reactでは、このように文字列をHTMLとしてレンダリングすることはできません。コンポーネント内にHTML文字列をレンダリングするには、dangerouslySetInnerHTMLという属性（docs）を使用する必要があります。以下のような

何か：

renderStr() { 
 
    return {__html: this.state.dataToRender}; 
 
}, 
 

 
render() { 
 
    return <div dangerouslySetInnerHTML={renderStr()} />; 
 
}

念頭に置いてベア属性名が示唆するように、あなたがレンダリングしているHTMLが安全であることを確認したいと思います。ユーザーからの入力である場合は、入力を保存/レンダリングする前に入力をサニタイズするか、自分自身や他のユーザーをセキュリティリスクにさらすことができます。 sanitizerやsanitize-htmlなどのNPM依存関係を使用することも、自分で行うための関数を書くこともできます。