当我们创建组件时，可以按照我们的想法为组件的属性定义默认值。这意味着我们在调用组件时，如果给这些属性设置值，组件会有一个默认的“配置”，而我们就不用操心在下一行代码中检查属性这类事情了。
当你定义了组件时，这些默认的属性会被缓存起来，因而针对每个组件的实例它们都是一样的，并且不能被改变。对于导航组件，我们将配置指定为一个空的数组，因而就算没有传入配置，render 方法内也不会发生错误。
var Navigation = React.createClass({ getInitialState: function () { return { openDropdown: -1 }; }, getDefaultProps: function () { return { config: [] } }, render: function () { return ( <div className="navigation"> </div> ); } });
React.render(<Navigation config=https://www.jb51.net/article/{ navigationConfig } />, document.body);
propTypes
我们也可以随意为每一个属性指定类型。这对于我们检查和处理属性的意外赋值非常有用。如下面的dropdown，我们指定只有数组才能放入配置。
var Navigation = React.createClass({ getInitialState: function () { return { openDropdown: -1 }; }, getDefaultProps: function () { return { config: [] } }, propTypes: { config: React.PropTypes.array }, render: function () { return ( <div className="navigation"> </div> ); } }); React.render(<Navigation config=https://www.jb51.net/article/{ navigationConfig } />, document.body);
mixins
我们也可以在组件中加入 mixins。这是一个独立于 React 的基本组件（只是一个对象类型的配置）。这意味着，如果我们有两个功能类似的组件，就可以共享一个配置了（如果初始状态相同）。我们可以抽象化地在 mixin 中建立一个方法，这样就不用把相同的代码写上两次了。
var ExampleMixin = { componentDidMount: function () { // bind some event listeners here }, componentWillUnmount: function () { // unbind those events here! } }; var ExampleComponent = React.createClass({ mixins: [ExampleMixin], render: function () { return ( <div> Hello World! </div> ); } }); var AnotherComponent = React.createClass({ mixins: [ExampleMixin], render: function () { return ( <div> Hello World! </div> ); } });
这样全部组件都有一样的 componentDidMount 和 componentWillUnmount 方法了，保存我们重写的代码。无论如何，你不能 override（覆盖）这些属性，如果这个属性是在mixin里设置的，它在这个组件中是不可覆盖的。
遍历循环
当我们有一个包含对象的数组，如何循环这个数组并渲染每一个对象到列表项中？JSX 允许你在任意 Javascript 文件中使用它，你可以映射这个数组并返回 JSX，然后使用 React 去渲染。
var navigationConfig = [ { href: 'http://ryanclark.me', text: 'My Website' } ]; var Navigation = React.createClass({ getInitialState: function () { return { openDropdown: -1 }; }, getDefaultProps: function () { return { config: [] } }, propTypes: { config: React.PropTypes.array }, render: function () { var config = this.props.config; var items = config.map(function (item) { return ( <li className="navigation__item"> <a className="navigation__link" href=https://www.jb51.net/article/{ item.href }> { item.text } </a> </li> ); }); return ( <div className="navigation"> { items } </div> ); } }); React.render(<Navigation config=https://www.jb51.net/article/{ navigationConfig } />, document.body);
在 JSFilddle 中随意使用 navigationConfigin
导航配置由数组和对象组成，包括一个指向超链接的 href 属性和一个用于显示的 text 属性。当我们映射的时候，它会一个个依次通过这个数组去取得对象。我们可以访问 href 和 text，并在 HTML 中使用。当返回列表时，这个数组里的列表项都将被替换，所以我们把它放入 React 中处理时它将知道怎么去渲染了！
混编
到目前位置，我们已经做到了所有下拉列表的展开。我们需要知道被下来的项目是哪个，我们将使用 .children 属性去遍历我们的 navigationConfig 数组。接下来，我们可以通过循环来操作下拉的子元素条目。
var navigationConfig = [ { href: 'http://ryanclark.me', text: 'My Website', children: [ { href: 'http://ryanclark.me/how-angularjs-implements-dirty-checking/', text: 'Angular Dirty Checking' }, { href: 'http://ryanclark.me/getting-started-with-react/', text: 'React' } ] } ]; var Navigation = React.createClass({ getInitialState: function () { return { openDropdown: -1 }; }, getDefaultProps: function () { return { config: [] } }, propTypes: { config: React.PropTypes.array }, render: function () { var config = this.props.config; var items = config.map(function (item) { var children, dropdown; if (item.children) { children = item.children.map(function (child) { return ( <li className="navigation__dropdown__item"> <a className="navigation__dropdown__link" href=https://www.jb51.net/article/{ child.href }> { child.text } </a> </li> ); }); dropdown = ( <ul className="navigation__dropdown"> { children } </ul> ); } return ( <li className="navigation__item"> <a className="navigation__link" href=https://www.jb51.net/article/{ item.href }> { item.text } </a> { dropdown } </li> ); }); return ( <div className="navigation"> { items } </div> ); } }); React.render(<Navigation config=https://www.jb51.net/article/{ navigationConfig } />, document.body);
实例在这里 - 但是我们还是能看见下来条目，尽管我们将 openDropdown 设置成为了 -1 。