在Storybook中制作故事时，是否需要在Template.bind(｛｝)中包含｛｝

Question

最近我开始学习反应Storybook。在下面的示例中，当我不在Template.bind({})中编写{}时，Storybook将完全正常运行，不会出现任何错误。但我发现很多人在写故事的时候都会在Template.bind({})中使用{}。

问：在Storybook中制作故事时，Template.bind({})中是否有必要包含{}？

import React from 'react'
import { MyButton } from './MyButton'
export default {
title :  'MyButton',
component : MyButton
};
const Template = (args) => <MyButton {...args}/>
export const Primary = Template.bind()
Primary.args = {
variant: 'primary',
label: 'button'
}

Answer 1

否，{}不是必需的或重要的。

.bind(thisArg)是一种方法，您可以调用函数来返回一个新函数，该函数的this关键字设置为传递给thisArg的任何关键字。然而，对于箭头函数(如您的示例(，传递什么作为thisArg并不重要，因为this在箭头函数上的工作方式不同。调用.bind()只会返回一个新的函数克隆。

.bind()方法仅用于克隆Template()函数。绑定行为其实并不重要(尤其是因为它是一个箭头函数(。重要的是，当你这样做时：

export const Primary = Template.bind()
Primary.args = {
variant: 'primary',
label: 'button'
}

CCD_ 16获得自己的CCD_ 17属性。您可以得到Template函数的多个克隆，这些克隆不会相互干扰。

下面是另一个问题的答案，它更详细地解释了如何使用.bind()方法克隆函数。

Answer 2

Template.bind({})是浪费时间/资源的，因为它在每次调用时都会创建一个对象，所以基本上是的-Template.bind()就足够了。如果不提供绑定参数，就不会发生任何错误。