You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!-- The function that creates the component is wrapped inside of a [forwardRef](https://reactjs.org/docs/react-api.html#reactforwardref) function call. This way the component can access the ref that is assigned to it.-->
<!-- The component uses the [useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle) hook to make its <i>toggleVisibility</i> function available outside of the component.-->
<!-- The form closes when a new blog is created.-->
596
-
当一个新的博客被创建时，该表单就会关闭。
589
+
<!-- The form hides again after a new blog is created or the <i>cancel</i> button is pressed.-->
590
+
当一个新的博客被创建或点击取消按钮后时，该表单就会关闭。
597
591
598
592
#### 5.6 Blog list frontend, step6
599
593
@@ -725,209 +719,84 @@ const Blog = ({ blog }) => {
725
719
726
720
<divclass="content">
727
721
728
-
### PropTypes
729
-
730
-
<!-- The <i>Togglable</i> component assumes that it is given the text for the button via the <i>buttonLabel</i> prop. If we forget to define it to the component:-->
<!-- The application works, but the browser renders a button that has no label text.-->
738
-
应用可以工作，但浏览器显示的按钮没有标签文本。
739
-
740
-
<!-- We would like to enforce that when the <i>Togglable</i> component is used, the button label text prop must be given a value.-->
741
-
我们希望强制规定，当使用<i>Togglable</i>组件时，必须给按钮标签文本prop一个值。
742
-
743
-
<!-- The expected and required props of a component can be defined with the [prop-types](https://github.com/facebook/prop-types) package. Let's install the package:-->
<!-- The console will display the following error message if the prop is left undefined:-->
766
-
如果该prop未被定义，控制台将显示以下错误信息。
767
-
768
-
769
-
770
-
771
-
<!-- The application still works and nothing forces us to define props despite the PropTypes definitions. Mind you, it is extremely unprofessional to leave <i>any</i> red output to the browser console.-->
<!-- Let's also define PropTypes to the <i>LoginForm</i> component:-->
775
-
我们也给<i>LoginForm</i>组件定义PropTypes。
776
-
777
-
```js
778
-
importPropTypesfrom'prop-types'
779
-
780
-
constLoginForm= ({
781
-
handleSubmit,
782
-
handleUsernameChange,
783
-
handlePasswordChange,
784
-
username,
785
-
password
786
-
}) => {
787
-
// ...
788
-
}
789
-
790
-
LoginForm.propTypes= {
791
-
handleSubmit:PropTypes.func.isRequired,
792
-
handleUsernameChange:PropTypes.func.isRequired,
793
-
handlePasswordChange:PropTypes.func.isRequired,
794
-
username:PropTypes.string.isRequired,
795
-
password:PropTypes.string.isRequired
796
-
}
797
-
```
798
-
799
-
<!-- If the type of a passed prop is wrong, e.g. if we try to define the <i>handleSubmit</i> prop as a string, then this will result in the following warning:-->
<!-- In part 3 we configured the [ESlint](/en/part3/validation_and_es_lint#lint) code style tool to the backend. Let's take ESlint to use in the frontend as well.-->
<!-- Vite has installed ESlint to the project by default, so all that's left for us to do is define our desired configuration in the <i>.eslintrc.cjs</i> file. -->
810
-
Vite 默认将 ESlint 安装到项目中，所以我们剩下要做的就是在 .eslintrc.cjs 文件中定义我们想要的配置。
811
-
812
-
<!-- Let's create a <i>.eslintrc.cjs</i> file with the following contents: -->
813
-
让我们创建一个包含以下内容的 .eslintrc.cjs 文件：
814
-
```bash
815
-
npm install --save-dev eslint-plugin-jest
816
-
```
727
+
<!-- Vite has installed ESlint to the project by default, so all that's left for us to do is define our desired configuration in the <i>eslint.config.js</i> file. -->
728
+
Vite 默认将 ESlint 安装到项目中，所以我们剩下要做的就是在 <i>eslint.config.js</i> 文件中定义我们想要的配置。
817
729
818
-
<!-- Let's create a <i>.eslintrc.js</i> file with the following contents:-->
819
-
让我们创建一个<i>.eslintrc.js</i>文件，内容如下。
730
+
<!-- Let's create a <i>eslint.config.js</i> file with the following contents:-->
<!-- NOTE: If you are using Visual Studio Code together with ESLint plugin, you might need to add additional workspace setting for it to work. If you are seeing ```Failed to load plugin react: Cannot find module 'eslint-plugin-react'``` additional configuration is needed. Adding the line ```"eslint.workingDirectories": [{ "mode": "auto" }]``` to settings.json in the workspace seems to work. See [here](https://github.com/microsoft/vscode-eslint/issues/880#issuecomment-578052807) for more information.-->
872
-
注意：如果你将Visual Studio Code与ESLint插件一起使用，你可能需要添加额外的工作区设置，以便它能够工作。如果你看到 ```加载插件reaction失败。无法找到模块"eslint-plugin-react"``` 需要额外的配置。添加一行 ```"eslint.workingDirectories":[{ "mode": "auto" }]``` 到工作区的settings.json中，似乎可以工作。更多信息见[这里](https://github.com/microsoft/vscode-eslint/issues/880#issuecomment-578052807)。
<!-- Let's create [.eslintignore](https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories) file with the following contents to the repository root-->
<!-- Now the directories <em>build</em> and <em>node_modules</em> will be skipped when linting.-->
885
-
现在目录<em>build</em>和<em>node_modules</em>将在检查时被跳过。
886
-
887
-
<!-- Let us also create a npm script to run the lint:-->
888
-
让我们也创建一个npm脚本来运行lint。
780
+
<!-- NOTE: If you are using Visual Studio Code together with ESLint plugin, you might need to add a workspace setting for it to work. If you are seeing <i>Failed to load plugin react: Cannot find module 'eslint-plugin-react'</i> additional configuration is needed. Adding the following line to settings.json may help: -->
781
+
注意：如果你在 Visual Studio Code 里使用 ESLint 插件，你可能需要修改一些工作区设置。如果你看到 <i>Failed to load plugin react: Cannot find module 'eslint-plugin-react'</i>，那么你需要添加额外的配置。把下一行到添加到 setting.json 中可能会有帮助：
889
782
890
783
```js
891
-
{
892
-
// ...
893
-
{
894
-
"scripts": {
895
-
"start":"react-scripts start",
896
-
"build":"react-scripts build",
897
-
"test":"react-scripts test",
898
-
"eject":"react-scripts eject",
899
-
"server":"json-server -p3001 db.json",
900
-
"eslint":"eslint ."// highlight-line
901
-
},
902
-
// ...
903
-
}
784
+
"eslint.workingDirectories": [{ "mode":"auto" }]
904
785
```
905
786
906
-
<!-- Component _Togglable_ causes a nasty looking warning <i>Component definition is missing display name</i>:-->
907
-
组件_Togglable_导致一个看起来很讨厌的警告 <i> 组件定义缺少显示名称</i>。
908
-
909
-
787
+
<!-- See [here](https://github.com/microsoft/vscode-eslint/issues/880#issuecomment-578052807) for more information. -->
<!-- You can find the code for our current application in its entirety in the <i>part5-7</i> branch of [this GitHub repository](https://github.com/fullstack-hy2020/part2-notes/tree/part5-7).-->
<!-- Define PropTypes for one of the components of your application, and add ESlint to the project. Define the configuration according to your liking. Fix all of the linter errors. -->
<!--Add ESlint to the project. Define the configuration according to your liking. Fix all of the linter errors. -->
813
+
将 ESlint 添加到项目中。根据你的喜好定义配置。然后修复所有的 linter 错误。
945
814
946
-
<!-- Vite has installed ESlint to the project by default, so all that's left for you to do is define your desired configuration in the <i>.eslintrc.cjs</i> file. -->
947
-
Vite 已经默认在项目中安装了 ESlint，所以你需要做的就是在 <i>.eslintrc.cjs</i> 文件中定义你想要的配置。
815
+
<!-- Vite has installed ESlint to the project by default, so all that's left for you to do is define your desired configuration in the <i>eslint.config.js</i> file. -->
816
+
Vite 已经默认在项目中安装了 ESlint，所以你需要做的就是在 <i>eslint.config.js</i> 文件中定义你想要的配置。
0 commit comments