根据我们前面“Hello World!”的例子，我们在 HTML 节点上有 className 的属性。在组件内部，我们可以使用 this.props.classname 访问这个值，但正如前面所述，你可以传递任何你喜欢的内容。对我们的下拉来说，我们需要将导航配置为对象，组件将使用它作为要渲染的配置。让我们开始吧—
var navigationConfig = []; var Navigation = React.createClass({ render: function () { return ( <div className="navigation"> </div> ); } });
React.render(<Navigation config=https://www.jb51.net/article/{ navigationConfig } />, document.body);
如果现在能访问 this.props.config 的话，我们会受到一个空数组（navigationConfig 的值）。在我们进入到真正导航的编码前先让我们说明一下状态。
状态
如之前所讨论的，每一个组件都有其自己的”状态”。当要使用状态时，你要定义初始状态，让后才可以使用 this.setState 来更新状态。无论何时状态得到了更新，组件都会再一次调用 render 函数，拿新的值去替换或者改变之前渲染的值。这就是虚拟 DOM 的奥义 - 计算差异的算法实在 React 内部完成的，因此我们不用去以来 DOM 的更新了(因为 DOM 很慢)。React 会计算出差异并产生一堆指令的集合 (例如，加入向”navigation__link“加入”active“类，或者移除一个节点），并在 DOM 上执行它们。
使用导航，我们将下拉菜单打开保持在状态中。为此，添加一个 getInitialState 函数到类配置对象上，并返回带有我们想要的初始状态的对象。
var navigationConfig = []; var Navigation = React.createClass({ getInitialState: function () { return { openDropdown: -1 }; }, render: function () { return ( <div className="navigation"> </div> ); } }); React.render(<Navigation config=https://www.jb51.net/article/{ navigationConfig } />, document.body);
你会发现我们将其设置成了-1。当我们准备去打开一个下拉菜单时，将使用状态里面的配置数组中的导航项的位置，而由于数组索引开始于0，我们就得使用 -1 来表示还没有指向一个导航项。
我们可以使用 this.state 来访问状态，因此如果我们去观察 atthis.state.openDropdown，应该会有 -1 被返回。
组件的生命周期
每个组件都有其“生命周期”—这是一系列你可以在组件配置里定义的函数，它们将在部件生命周期内被调用。我们已经看过了 getinitialstate 一它只被调用一次，在组件被挂载时调用。
componentWillMount
当组件要被挂载时这个函数被调用。这意味着我们可以在此运行组件功能必须的代码。为由于 render 在组件生命周期里被多次调用，我们一般会把只需要执行一次的代码放在这里，比如 XHR 请求。
var ExampleComponent = React.createClass({ componentWillMount: function () { // xhr request here to get data }, render: function () { // this gets called many times in a components life return ( <div> Hello World! </div> ); } });
componentDidMount
一旦你的组件已经运行了 render 函数，并实际将组件渲染到了 DOM 中，componentDidMount 就会被调用。我们可以在这儿做任何需要做的 DOM 操作，已经任何需要依赖于组件已经实际存在于 DOM 之后才能做的事情, 例如渲染一个图表。你可以通过调用 this.getDOMNode 在内部访问到 DOM 节点。
var ExampleComponent = React.createClass({ componentDidMount: function () { var node = this.getDOMNode(); // render a chart on the DOM node }, render: function () { return ( <div> Hello World! </div> ); } });
componentWillUnmount
如果你准备吧组件从 DOM 移除时，这个函数将会被调用。这让我们可以在组件背后进行清理，比如移除任何我们已经绑定的事件监听器。如果我们没有在自身背后做清理，而当其中一个事件被触发时，就会尝试去计算一个没有载入的组件，React 就会抛出一个错误。
var ExampleComponent = React.createClass({ componentWillUnmount: function () { // unbind any event listeners specific to this component }, render: function () { return ( <div> Hello World! </div> ); } });
组件方法
React 也为组件提供了更方便我们工作的方法。它们会在组件的创建过程中被调用到。例如getInitialState，能让我们定义一个默认的状态，这样我们不用担心在代码里面对状态项目是否存在做进一步的检查了。
getDefaultProps