diff --git a/react/react文档.md b/react/react文档.md index 0ce6bc0..ae48483 100644 --- a/react/react文档.md +++ b/react/react文档.md @@ -219,6 +219,64 @@ function MyButton({ count, onClick }) { } ``` 此时,由MyApp传递给MyButton的值称之为prop +## jsx展开传递props +如果父组件想要将接收到的props全部传递给子组件,无需在子组件上列出props中全部属性,可以使用`...props`来进行展开 +```js +function Profile(props) { + return ( +
+ +
+ ); +} +``` +## 将jsx作为子组件传递 +当采用如下形式时: +```js + + + +``` +其中,父组件接收到的prop中,children将代表接受到的子组件内容 +```js +import Avatar from './Avatar.js'; + +function Card({ children }) { + return ( +
+ {children} +
+ ); +} + +export default function Profile() { + return ( + + + + ); +} +``` +此时,想要嵌套在父组件内部的子组件可以通过props.children来访问。 + +## 条件渲染 +如果在某些条件下,组件不想显示任何内容,可以返回null +```js +function Item({ name, isPacked }) { + if (isPacked) { + return null; + } + return
  • {name}
  • ; +} +``` + +