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

Question

我正在尝试使用故事书测试反应搜索组件，它给出了unboundStoryFn错误。 错误说unboundStoryFn(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. 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 语句。 或者应该是组件的东西没有被初始化并被赋予一个值。 但通常是第一个。