这篇文章主要是翻译和记录了一些 Gateby 的基础知识，有助于开发者通过这些基础知识进行快速的开发 Refer to the Article: https://mpolinowski.github.io/gatsby-js-knowledgebase 06 属性传递(Passing down Props) 现在，我们可以从父组件传递属性到Counter组件。例： 我们可以通过显示的页面来更改我们的Counter 标题。 6.1 更改头部 1 <Counter header="This is the Index Counter" /> 这个header的属性现在可以用在Counter组件中的render方法。现在我们可以通过调用他的父组件来为Counter组件获取不同的标头了。 1 2 3 4 5 6 7 8 render() { return <div> <h3>{this.props.header}</h3> <p>current count: {this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}>plus</button> <button onClick={() => this.setState({ count: this.state.count - 1 })}>minus</button> </div> } 6.

这篇文章主要是翻译和记录了一些 Gateby 的基础知识，有助于开发者通过这些基础知识进行快速的开发 Refer to the Article: https://mpolinowski.github.io/gatsby-js-knowledgebase 00 准备操作 The default Gatsby starter Github 有关项目结构的概述，请参阅Gatsby documentation - Building with Components 从您的 CLI 运行此安装程序（假设已安装 Gatsby）： 1 gatsby new gatsby-wiki 01 开始你的 Gatsby 开发环境(Start your Gatsby development environment) 现在请转到你的站点目录中，并使用 npm 运行你的 Gatsby 开发环境如下： 1 2 cd gatsby-wiki npm run development 看，你可以访问你的网站了http://localhost:8000 02 添加内容和链接页面(Adding content and Linking Pages) /src/pages/index.js 文件包含常规的 JSX-在<div />标记内添加任何 HTML，可以让它显示在您的网站内。（Gatsby 使用的热加载）