Question

我有一个带有一些HTML的const requiredText。将requiredText与React.Fragment一起返回到我的Storybook故事中，由于某种原因，不会产生任何输出。

如果我如下定义requiredText且没有片段，则可以正常工作：

const requiredText = (
  <div>
    <p>This isn't rendering</p>
    <p>and I'm not sure why</p>
  </div>
);

不要认为我的语法正确。如何在const以下定义以下内容？它需要成为一个函数吗？

const requiredText = () => (
  <>
    <p>This isn't rendering</p>
    <p>the syntax must be wrong</p>
  </>
);

const BannerStory = () => {
  return <Banner header={requiredText} />;
};

class Banner extends React.Component {
  render() {
    return <SomeComponent anotherprop={this.props.header} />;
  }
}

Answer 1

您没有执行requiredText，因此您传递的是对该函数的引用，而不是其返回值。

这样做：

$animals{$group} = $animals{$group}->[0]

为了“注入” requiredText的返回值

如果可以的话

const BannerStory = () => {
  return <Banner header={requiredText()} />;
};

您得到：

console.log( requiredText )

执行函数将捕获返回值

Answer 2

在以下代码块中：

for(int i = 0; i < randomNumber; i++)
{
    outputFile.WriteLine(r.Next(1, 10).ToString());
}

您传递的是功能，而不是组件本身。在让孩子失望之前执行它。

const BannerStory = () => {
  return <Banner header={requiredText} />;
};

如果片段语法const BannerStory = () => { return <Banner header={requiredText()} />; };对您不起作用，请检查您的Webpack设置。您也可以尝试使用<>来代替React.Fragment。

<>

将带有片段的const返回

2 个答案: