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”，请考虑在默认情况下在switch中返回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}</>
 };

React.js-收到错误“渲染未返回任何内容”。从switch语句

2 个答案: