プロパティを受け取り、block.type 値に応じてマークアップの一部をレンダリングする必要があるコンポーネントがあると、エラーが発生します。
エラー: 段落(...): レンダリングから何も返されませんでした。これは通常、return ステートメントが欠落していることを意味します。または、何もレンダリングしない場合は、null を返します。
レンダリングに段落を表示できないのですが、何が足りないのでしょうか?
const Paragraph = props => {
const { block } = props;
const align = block.attributes.align;
switch (block.type) {
case 'CORE_PARAGRAPH':
if (align === 'center') {
return (
<div style={{ textAlign: align }}>
<div>
<p
dangerouslySetInnerHTML={{ __html: block.innerHtml }}
/>
</div>
</div>
);
}
break;
default:
break;
}
};
------------------------
コンポーネントが「html」を返す必要がない場合は、次のようにスイッチのデフォルトで null を返すことを検討してください。
const Paragraph = (props) => {
const { block } = props;
const align = block.attributes.align;
switch (block.type) {
case "CORE_PARAGRAPH":
if (align === "center") {
return (
<div style={{ textAlign: align }}>
<div>
<p dangerouslySetInnerHTML={{ __html: block.innerHtml }} />
</div>
</div>
);
} else return null;
default:
return null;
}
};
------------------------
content という変数を作成し、switch ケース内で更新してそれを返します。
const Paragraph = props => {
const { block } = props;
const align = block.attributes.align;
let content=null;
switch (block.type) {
case 'CORE_PARAGRAPH':
if (align === 'center') {
content= (
<div style={{ textAlign: align }}>
<div>
<p
dangerouslySetInnerHTML={{ __html: block.innerHtml }}
/>
</div>
</div>
);
}
break;
default:
content=null
break;
}
return <>{content}</>
};