月度归档:2019年01月

NBSP

  ,全称是 non-breaking space,除了表示空白,还含有告诉渲染引擎不要在此换行的意义。

可用于空间足够时和别的文本在同一行内展示,空间不够时,整串字符串(如 0800 3000 9974 这样的通过空白符来让电话号码等更易读的情况)不会在在空白符处换行,而是整串换行(需要把空白符替换为  )。当然,也可以通过设置这个串为不折行来解决:white-space: nowrap;

此为示例代码

参考

React Context

Context 的目的是对于全局的需要多处使用的数据,不希望通过 prop 一层层传递下去,而是可以直接使用。

childContextTypes & getChildContext

该方案在 16.3 后不再是推荐方案。

React 最初提供的 context 方案是提供 context 数据的组件通过静态的 childContextType 来定义 context 中各字段的数据类型,通过 getChildContext 成员方法来提供实际的 context 数据,其中,返回的数据可以搭配 prop 和 state 来提供响应式的数据。而消费 context 数据的组件通过静态的 contextTypes 来指定需要消费的 context 字段的类型集合,然后即可通过 this.context[fieldName] 来使用。

注意,消费 context 的组件只需要定义需要的字段的类型即可,不需要是全部。同时,也不需要是提供 context 的组件的直接子组件。

import PropTypes from 'prop-types';

class Button extends React.Component {
  static contextTypes = {
    color: PropTypes.string
  };

  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  static childContextTypes = {
    color: PropTypes.string
  };

  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

继续阅读

青春猪头少年不会梦到兔女郎学姐

青春猪头少年不会梦到兔女郎学姐

这部作品是 18 年比较喜欢的一部作品,故事情节以及表达方式上都是容易理解和接受的。渴望被关注、被爱、被认同、融入群体、有三五知己、开始需要直面社会背面的恶,由此而带来的属于青春的烦恼和情感。

由于是小说改编,也还不是完全改编——不知道是否是想留做第二季,所以 TV 版情节上有些不完整,比如比较关键的翔子的故事没能展示出来。但依然是一个好作品,相比之下,《我喜欢的妹妹但不是妹妹》的故事则完全没有吸引力。

海峡两岸

台湾问题,以前没关注过,最近才听到「九二共识」这个概念。

虽然有着各自的政治倾向,但个人浅薄的理解是,希望能在认同都是中华民族血脉的前提下谋求当下合作共存,展望未来的统一——大陆的收复台湾和台湾的反攻大陆。所以,终极目的是大一统。

这个终极目的,在蔡英文当局以及其所在的民进党以「台独」为目的的存在来说,这是不可能接受的。