docs Typechecking With PropTypes #108
Conversation
ycjcl868
changed the title
|
Deploy preview for cn-reactjs ready! Built with commit f47755a |
| > | ||
| > `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types). | ||
| > 自 React 15.5 起，`React.PropTypes` 已移入另一个包中。请使用 [`prop-types`](https://www.npmjs.com/package/prop-types) 库代替。 |
There was a problem hiding this comment.
自 React 15.5 起 => 自 React v15.5 起，版本v我觉得还是保留比较好吧~
如果要与原文一致的话，写成 请使用此 prop-types 库替代，会不会更好呢？
| > | ||
| >We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion. | ||
| >我们提供了一个 [codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) 脚本来自动转换。 |
There was a problem hiding this comment.
这里也是一样的问题，可以把 一个 codemon 脚本 放在链接内吧。这样以后原文更改后这里的翻译变化能更对应~
| @@ -30,18 +30,17 @@ Greeting.propTypes = { | |||
| }; | |||
| ``` | |||
|
|
|||
| `PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode. | |||
| `PropTypes` 提供一系列验证器，可用于组件接收的数据类型是有效的。在本例中, 我们使用了 `PropTypes.string`。当传入类型不正确的属性时，JavaScript 控制台将会显示警告。出于性能方面的考虑，`propTypes` 只仅在开发模式下进行检查。 | |||
There was a problem hiding this comment.
-
可用于组件接收的数据类型是有效的 =》 可用于确保组件接收的数据类型是有效的。忘记翻译啦~
-
当传入类型不正确的属性时 =》 当一个类型不正确的值传入该 prop 时。 我个人倾向于 prop 不翻译（之前貌似讨论的是这样的），其次我觉得这里应该把“value”翻译出来吧~
-
只仅在开发模式下进行检查 =》 仅在开发模式下被检查
|
|
||
| ### PropTypes {#proptypes} | ||
| ### Prop 类型 {#proptypes} |
There was a problem hiding this comment.
PropTypes 是专有名词吧，这里不应该拆开来翻译，你觉得呢？
|
|
||
| ```javascript | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| MyComponent.propTypes = { | ||
| // You can declare that a prop is a specific JS type. By default, these | ||
| // are all optional. | ||
| // 你可以将属性声明为 JS 原生类型，默认情况下这些属性都是可选的。 |
There was a problem hiding this comment.
这里根据之前群里讨论的结果，要求中文行数要和英文一致，防止错位，使得后续 merge 有困难。
|
|
||
| With `PropTypes.element` you can specify that only a single child can be passed to a component as children. | ||
| 使用 `PropTypes.element` | ||
| 你可以指定 children 只有一个元素作为传递到组件。 |
There was a problem hiding this comment.
行数问题。
额，这里是机器翻译吗？
翻译成“你可以通过 PropTypes.element 来确保传递给组件的 children 中只包含一个子元素”。
There was a problem hiding this comment.
子元素 这里感觉不太合适，本意是一个 ReactElement。
| @@ -119,16 +114,17 @@ MyComponent.propTypes = { | |||
| }; | |||
| ``` | |||
|
|
|||
| ### Requiring Single Child {#requiring-single-child} | |||
| ### 限制一个元素 {#requiring-single-child} | |||
There was a problem hiding this comment.
在标题中，使用“限制单个元素”是否更正式些呢？
| @@ -143,9 +139,9 @@ MyComponent.propTypes = { | |||
| }; | |||
| ``` | |||
|
|
|||
| ### Default Prop Values {#default-prop-values} | |||
| ### 属性默认值 {#default-prop-values} | |||
There was a problem hiding this comment.
占个坑~
主要是 prop 是否翻译的问题。
如果不翻译，那么是“默认 prop 值”
| ReactDOM.render( | ||
| <Greeting />, | ||
| document.getElementById('example') | ||
| ); | ||
| ``` | ||
|
|
||
| If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields). | ||
| 如果你正在使用像 [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) 的 Babel 转换工具，你也可以在 React 组件类中声明 `defaultProps` 作为静态属性。此语法提案还没有最终确定，在浏览器中需要进行编译才能使用。要了解更多信息，请查阅 [class fields proposal](https://github.com/tc39/proposal-class-fields)。 |
There was a problem hiding this comment.
在浏览器中需要进行编译才能使用 有歧义，因为浏览器不能编译这些新语法。不如翻译成“需要编译后才能在浏览器中运行”
| @@ -184,4 +180,4 @@ class Greeting extends React.Component { | |||
| } | |||
| ``` | |||
|
|
|||
| The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`. | |||
| `defaultProps` 用于确保 `this.props.name` 在父组件没有指定值时，有一个默认值。`propTypes` 类型检查发生在 `defaultProps` 赋值后，所以类型检查也适用于 `defaultProps`。 | |||
There was a problem hiding this comment.
在父组件没有指定值时 =》 在父组件没有指定其值时
这样会不会更清晰一些~
感谢 review，修改了一部分，另一部分这周抽时间再斟酌斟酌。 |
|
Deploy preview for zh-hans-reactjs processing. Building with commit 476da15 https://app.netlify.com/sites/zh-hans-reactjs/deploys/5c76abe06601390008ef68f0 |
|
Deploy preview for zh-hans-reactjs ready! Built with commit f47755a |
* 📝 docs Typechecking With PropTypes * fix: typechecking doc * fix: doc * fix: doc * fix: doc
大佬们 review review ~