React学习手册

Props

、

State

和组件树

｜

115

<p>

<span>{ingredients} Ingredients</span> |

<span>{steps} Steps</span>

</p>

</div>

)

}

})

在组件中使用数字是一个更灵活的方法。现在

Summary

组件只需显示

UI

即可，它将实

际的统计食材成分种类和烹饪步骤工作进一步沿着组件树向上传递给了它的父节点或

者祖先节点。

默认

Props

另外一种改进组件质量的方法是为属性设置默认值。

注

1

验证行为和用户预期的一致：

如果没有提供其他属性值，那么系统将会采用默认的属性值。

现在假定我们希望

Summary

组件即使在没有提供属性数据的情况也可以正常工作：

import { render } from 'react-dom'

render(<Summary />, document.getElementById('react-container'))

在

createClass

方法中，我们可以添加一个名为

getDefaultProps

的方法，以便可以在

用户没有提供属性值的情况下返回默认的属性值：

const Summary = createClass({

displayName: "Summary",

propTypes: {

ingredients: PropTypes.number,

steps: PropTypes.number, ...