javascript - React.js - 「レンダリングから何も返されませんでした。」というエラーを受信しました。 switch ステートメントから

okwaves2024-01-25  7

プロパティを受け取り、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}</>
 };

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。