unboundStoryFn(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Question

我正在尝试使用故事书测试 React 搜索组件，它给出了 unboundStoryFn 错误。错误显示 unboundStoryFn(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. 我似乎无法找到问题。

import React from "react";
import PropTypes from "prop-types";
import "./SearchBox.css";

const STYLES = ["apolity", "skin", "cloud", "dark", "peacock"];

const fetchColor = (color) => {
  var test = getComputedStyle(document.documentElement).getPropertyValue(
    `--${color}`
  );

  return test;
};

const SearchBox = ({ style, type, onClick, color, className }) => {
  style = STYLES.includes(style) ? style : STYLES[0];

  color = STYLES.includes(color) ? fetchColor(color) : "#1e656d";

  return (
    <div>
      <input
        className={`searchbox ${style} ${className}`}
        onClick={onClick}
        type={type}
        placeholder="Search"
      ></input>

      <svg
        width="18"
        height="18"
        viewBox="0 0 18 18"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={` search-icon `}
      >
        <circle
          cx="10.5513"
          cy="6.82051"
          r="5.32051"
          transform="rotate(90 10.5513 6.82051)"
          stroke={color}
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M5.71802 10.9102L1.62828 14.9999"
          stroke={color}
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  );
};

SearchBox.propTypes = {
  style: PropTypes.string,
  color: PropTypes.string,
};

SearchBox.defaultProps = {
  style: "apolity",
  color: "apolity",
};

export default SearchBox;

import React from 'react';
import SearchBox from './index';

export default {
  title: 'Components/Search',
  component: SearchBox,
  argTypes: {
    onClick: { action: 'clicked' },
    style: {
      control: {
        type: 'select',
        options: ['apolity', 'skin', 'cloud', 'dark', 'peacock'],
      },
    },
    color: {
      control: {
        type: 'select',
        options: ['apolity', 'skin', 'cloud', 'dark', 'peacock'],
      },
    },
  },
};

const Template = (args) => {
  <SearchBox {...args} />;
};

export const Type1 = Template.bind({});

Type1.args = {
  color: 'apolity',
  style: 'apolity',
};

文件结构

故事书错误页面

Answer 1

const Template = (args) => {
  <SearchBox {...args} />;
};

应该

const Template = (args) => {
  return <SearchBox {...args} />;
};

让我知道这是否解决了它。每当您在 react 中遇到该错误时，就意味着您忘记了某个地方的 return 语句。或者应该是一个组件的东西还没有被初始化并被赋予一个值。但通常是第一个。