React入门2：创建界面

2 年 ago
科, 颖
3 minutes

首先

我希望通过这篇文章来复习并记录备忘，同时也想在多篇文章中使用React来开发井字棋游戏（三连棋）。

    • React

 

    • CodeSandbox(公式)

 

    CodeSandbox(非公式の日本語ガイド)

系列列表

    1. React入门1：环境搭建[在线版]

 

    1. React入门1.5：环境搭建[本地版-番外篇]

React入门2：棋盘的创建（本次）
React入门3：交互的实现
React入门4：重构[提升篇]
React入门5：重构[交互篇]
React入门6：回合的实现
React入门7：游戏胜利判断
React入门8：文本的实现
React入门9：时间旅行(1)
React入门10：时间旅行(2)
React入门11：时间旅行(3)

关于目的

是每个人都朝着共同的目标努力

我们将在React公式教程中使用3×3的方格来实现井字游戏。

 

这次的目的

开始创建一个由3×3网格构成的面板。现在开始编码。

研發

您可以在下一页上查看上次的源文件。

 

    前回の内容はコチラから！

 

创建盐池

让我们在App.js中写下以下代码。

export default function Square() {
  return (
      <button className="square">X</button>
  );
}

默认输出表示在导入App.js时将执行的组件（函数）。这里，通过将App.js导入到index.js中，调用了Square组件。请注意，组件名称必须以大写字母开头。

当看到这个文本的时候，我们可以发现里面描述了一个

使用这个设置，将会显示标有「X」的方块。

image.png

由于现在的样式看起来很乏味，所以将在styles.css中对方框进行装饰。

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

为了反映装饰性，我们会在App.js中加载styles.css文件。

import "./styles.css";

export default function Square() {
  return (
      <button className="square">X</button>
  );
}

这样就会应用 styles.css 的样式。

image.png

创建交易界面

接下来我们展示多个方格，并创建棋盘。

展示两个空间

首先，我们将显示两个方格。

import "./styles.css";

export default function Square() {
  return (
    <>
      <button className="square">X</button>
      <button className="square">X</button>
    </>
  );
}
image.png

碎片 <>

在该文中，有两个

    • プログラム

 

    • return (


    • );

エラー
/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag.
Did you want a JSX Fragment <>…</>?

创建一个3×3的游戏板

和显示两个方块一样，让我们在return语句中填写9个 

import "./styles.css";

export default function Square() {
  return (
    <>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
    </>
  );
}

动作结果将以一行显示9个方格。

image.png

因此，我们可以使用

元素将每个

元素应该具有相同的 className。

import "./styles.css";

export default function Square() {
  return (
    <>
      <div className="board-row">
        <button className="square">X</button>
        <button className="square">X</button>
        <button className="square">X</button>
      </div>
      <div className="board-row">
        <button className="square">X</button>
        <button className="square">X</button>
        <button className="square">X</button>
      </div>
      <div className="board-row">
        <button className="square">X</button>
        <button className="square">X</button>
        <button className="square">X</button>
      </div>
    </>
  );
}

为了将每个项目显示为一行，请在styles.css文件中添加以下内容。使用::after伪元素可以对

元素后面的样式进行设置。

.board-row::after {
  clear: both;
  content: "";
  display: table;
}

用这些就可以组成一个3×3的棋盘了。

image.png

组件的分解

回顾一下这里的 App.js 程序，我们可以看到通过在 Square 组件中直接编写多个方块，来创建棋盘呢。

让我们将此分解成以下的构成方式。

Board コンポーネント (親コンポーネント)

盤上を構成する要素
複数の Square コンポーネントを呼ぶ

Square コンポーネント (子コンポーネント)

マスを構成する要素
呼ばれるときには、マス内に表示する文字を受け取る

コンポーネント化.jpg

让我们将App.js的程序改为以下方式。

Board コンポーネントを実装する

「export default function Square()」のリネーム
コンポーネント名 Square() を Board() に変更する

を に変更する

新たに Square コンポーネントを実装する

プロパティ(引数)として value を加える

import "./styles.css";

function Square({ value }) {
  return <button className="square">{value}</button>;
}

export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square value="X" />
        <Square value="X" />
        <Square value="X" />
      </div>
      <div className="board-row">
        <Square value="X" />
        <Square value="X" />
        <Square value="X" />
      </div>
      <div className="board-row">
        <Square value="X" />
        <Square value="X" />
        <Square value="X" />
      </div>
    </>
  );
}

花括号 {} 的语法意义

注意到在 Square 组件中有花括号 {}。在使用 JSX 中的 JavaScript 语法时，需要这些花括号。在 Square 组件中，{value} 被写入，以实现以下两个目的。

Square コンポーネントのプロパティを設定する
プロパティの値を

让我们试试省略这个的结果会如何。

function Square(value) {
  return <button className="square">value</button>;
}

结果，value被识别为字符串。这表明它与HTML中的

image.png

最后

这次我们使用 Square 组件和 Board 组件来创建游戏板。下一页会展示当前阶段的源文件。

 

下一步我们将在棋盘上添加鼠标交互功能！

 

✖
广告
将在 10 秒后关闭
bannerAds