XHP：指南

以下是使用XHP时要了解和遵循的一般使用指南。除了其基本用法，可用的方法和扩展XHP与您自己的对象，这些是其他提示，以充分利用XHP。

属性和儿童的验证

XHP对象子元素和属性的约束在不同时间完成：

• 儿童约束在渲染时（toString()明确或隐含调用时）进行验证。
• 属性名称和类型在标签或通过属性设置时进行验证setAttribute()。
• @required 在所需属性被读取时被验证。

此验证默认启用。您可以在使用XHP之前运行以下代码来关闭它：

：XHP :: $ ENABLE_VALIDATION = FALSE

使用上下文访问较高级别的信息

如果您有parent对象，并且要向UI树（例如，<ul>to <li>）进一步向某个对象提供信息，则可以为这些较低对象设置上下文，较低对象可以检索它们。你使用setContext()和getContext()

<?hh

class :ui-myparent extends :x:element {
  attribute string text @required;
  children (:ui-mychild);

  protected function render(): XHPRoot {
    return (
      <dl>
        <dt>Text</dt>
        <dd>{$this->:text}</dd>
        <dt>Child</dt>
        <dd>{$this->getChildren()}</dd>
      </dl>
    );
  }
}

class :ui-mychild extends :x:element {
  attribute string text @required;

  protected function render(): XHPRoot {
    if ($this->getContext('hint') === 'Yes') {
      return
        <x:frag>{$this->:text . '...and more'}</x:frag>;
    }
    return
      <x:frag>{$this->:text}</x:frag>;
  }
}

function guidelines_examples_context_run(string $s): void {
  $xhp = (
    <ui-myparent text={$s}>
      <ui-mychild text="Go" />
    </ui-myparent>
  );
  $xhp->setContext('hint', $s);
  echo $xhp;
}

guidelines_examples_context_run('No');
echo "\n\n";
guidelines_examples_context_run('Yes');

Output

<DL> <DT>文本</ DT> <DD>没有</ DD> <DT>子</ DT> <DD>转到</ DD> </ DL>

<dl> <dt>文本</ dt> <dd>是</ dd> <dt> Child </ dt> <dd> Go ... and more </ dd> </ dl>

上下文只在渲染时传递给树; 这允许您构建一个树，而不需要通过数据。一般来说，你只应该调用孩子getContext()的render()方法。

常见用途包括：

• 当前用户ID
• 当前主题在多主题网站
• 当前浏览器/设备类型

不要将公共方法添加到您的XHP组件

XHP对象只能通过其属性，上下文，树中的位置和呈现它们进行交互。在Facebook，我们还没有遇到任何公共方法比这些接口更好的解决方案的情况。

Use Inheritance Minimally

如果您需要一个XHP对象像另一个，但稍作修改，使用组合。类别和属性克隆可用于提供通用接口。

Remember No Dollar Signs

属性声明看起来像Hack属性声明：

public string $prop;
attribute string attr;

一个关键的区别是没有$在属性名称前面。