codecamp

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;

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


XHP:迁移
Typechecker简介
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }