反应.js - 从 switch 语句接收错误"Nothing was returned from render."

Question

给定一个组件，它接受一个道具，并且应该根据block.type值呈现一段标记，我收到错误

Error: Paragraph(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, 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;
}
};

Answer 1

如果您的组件不需要返回一个"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;
}
};

Answer 2

创建一个名为content的变量，并在交换机案例中更新，然后返回它：

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}</>
};