XHP：基本使用

首先，確保您已將XHP庫(kù)安裝為項(xiàng)目的依賴(lài)關(guān)系 - 這定義了XHP的各種核心類(lèi)和標(biāo)準(zhǔn)HTML組件。

XHP是一種用于創(chuàng)建實(shí)際Hack對(duì)象的語(yǔ)法，稱(chēng)為XHP對(duì)象。它們意在用作樹(shù)，孩子可以是其他XHP對(duì)象或文本節(jié)點(diǎn)。

創(chuàng)建一個(gè)簡(jiǎn)單的XHP對(duì)象

而不是使用new運(yùn)算符，創(chuàng)建XHP看起來(lái)非常像XML：

$my_xhp_object = <p>Hello, world</p>;

$my_xhp_object現(xiàn)在包含一個(gè):p類(lèi)的實(shí)例- 初始:標(biāo)記為XHP類(lèi)，但在實(shí)例化時(shí)不需要。這是一個(gè)真正的對(duì)象，意思是is_object()返回true，你可以調(diào)用它的方法。

下面的例子使用了三個(gè)XHP類(lèi)：:div，:strong，:i。空格是微不足道的，所以你可以在你的代碼中創(chuàng)建一個(gè)可讀的樹(shù)結(jié)構(gòu)。

<?hh

function basic_usage_examples_basic_xhp(): void {
  var_dump(
    <div>
       My Text
       <strong>My Bold Text</strong>
       <i>My Italic Text</i>
    </div>
  );
}

basic_usage_examples_basic_xhp();

Output

object(xhp_div)#5 (5) {
  ["tagName":protected]=>
  string(3) "div"
  ["attributes":"xhp_x__composable_element":private]=>
  object(HH\Map)#6 (0) {
  }
  ["children":"xhp_x__composable_element":private]=>
  object(HH\Vector)#7 (3) {
    [0]=>
    string(9) " My Text "
    [1]=>
    object(xhp_strong)#12 (5) {
      ["tagName":protected]=>
      string(6) "strong"
      ["attributes":"xhp_x__composable_element":private]=>
      object(HH\Map)#13 (0) {
      }
      ["children":"xhp_x__composable_element":private]=>
      object(HH\Vector)#14 (1) {
        [0]=>
        string(12) "My Bold Text"
      }
      ["context":"xhp_x__composable_element":private]=>
      object(HH\Map)#15 (0) {
      }
      ["source"]=>
      string(91) "/data/users/joelm/user-documentation/guides/hack/24-XHP/02-basic-usage-examples/basic.php:9"
    }
    [2]=>
    object(xhp_i)#19 (5) {
      ["tagName":protected]=>
      string(1) "i"
      ["attributes":"xhp_x__composable_element":private]=>
      object(HH\Map)#20 (0) {
      }
      ["children":"xhp_x__composable_element":private]=>
      object(HH\Vector)#21 (1) {
        [0]=>
        string(14) "My Italic Text"
      }
      ["context":"xhp_x__composable_element":private]=>
      object(HH\Map)#22 (0) {
      }
      ["source"]=>
      string(92) "/data/users/joelm/user-documentation/guides/hack/24-XHP/02-basic-usage-examples/basic.php:10"
    }
  }
  ["context":"xhp_x__composable_element":private]=>
  object(HH\Map)#8 (0) {
  }
  ["source"]=>
  string(92) "/data/users/joelm/user-documentation/guides/hack/24-XHP/02-basic-usage-examples/basic.php:11"
}

在var_dump()該對(duì)象的樹(shù)已創(chuàng)建項(xiàng)目-不是一個(gè)HTML / XML字符串?？梢酝ㄟ^(guò)簡(jiǎn)單地使用echo/ print()或通過(guò)調(diào)用生成HTML字符串$xhp_obect->toString()。

動(dòng)態(tài)內(nèi)容

迄今為止的例子只顯示了靜態(tài)內(nèi)容，但通常需要包括在運(yùn)行時(shí)生成的東西; 為此，您可以直接在XHP中使用Hough表達(dá)式與大括號(hào)：

<xhp_class>{$some_expression}</xhp_class>

這也適用于屬性：

<xhp_class attribute = {$ some_expression} />

還支持更復(fù)雜的表達(dá)式，例如：

<?hh

class MyBasicUsageExampleClass {
  public function getInt(): int {
    return 4;
  }
}

function basic_usage_examples_get_string(): string {
  return "Hello";
}

function basic_usage_examples_get_float(): float {
  return 1.2;
}

function basic_usage_examples_embed_hack(): void {
  $xhp_float = <i>{basic_usage_examples_get_float()}</i>;
  $a = new MyBasicUsageExampleClass();

  echo (
    <div>
      {(new MyBasicUsageExampleClass())->getInt()}
      <strong>{basic_usage_examples_get_string()}</strong>
      {$xhp_float /* this embeds the <i /> element as a child of the <div /> */}
    </div>
  );
}

basic_usage_examples_embed_hack();

Output

<div>4<strong>Hello</strong><i>1.2</i></div>

屬性

像HTML一樣，XHP支持XHP對(duì)象上的屬性。XHP對(duì)象可以具有零到無(wú)限數(shù)量的可用屬性。XHP類(lèi)定義了該類(lèi)對(duì)象可用的屬性。

echo <input type =“button”name =“submit”value =“OK”/>;

這里的:input類(lèi)有屬性type，name并且value作為其屬性的一部分。

某些屬性是必需的，如果您使用沒(méi)有該屬性的必需屬性的XHP對(duì)象，則XHP會(huì)拋出錯(cuò)誤。

HTML字符引用

為了編碼一個(gè)保留的HTML字符或不容易獲得的字符，您可以在XHP中使用HTML字符引用。

<?hh
echo <span>&hearts; &#9829; &#x2665;</span>;

以上使用HTML字符參考編碼，使用顯式名稱(chēng)，十進(jìn)制符號(hào)和十六進(jìn)制符號(hào)打印出心形符號(hào)。