react生僻写法记录

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

//如果你没有给属性传值，它默认为 true
<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

在包含开始和结束标签的JSX表达式中，标记之间的内容作为特殊的参数传递：props.children

<MyComponent>Hello world!</MyComponent>

MyComponent 的 props.children 值将会直接是 “hello world!”。

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

false、null、undefined 和 true 都是有效的子代，但它们不会直接被渲染

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

如果你想让类似 false、true、null 或 undefined 出现在输出中，你必须先把它转换成字符串 :

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

JSX只会在showHeader为true时渲染

组件。

<div>
  {showHeader && <Header />}
  <Content />
</div>

下面的代码不会像你预期的那样运行，因为当 props.message 为空数组时，它会打印0:

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

使用 PropTypes 进行类型检查

import PropTypes from 'prop-types';

class Greeting extends BaseComponent {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

// 为属性指定默认值:
Greeting.defaultProps = {
  name: 'Stranger'
};

MyComponent.propTypes = {
  // 你可以将属性声明为以下 JS 原生类型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 任何可被渲染的元素（包括数字、字符串、子元素或数组）。
  optionalNode: PropTypes.node,

  // 一个 React 元素
  optionalElement: PropTypes.element,
  // 你也可以在任何 PropTypes 属性后面加上 `isRequired` 
  // 后缀，这样如果这个属性父组件没有提供时，会打印警告信息
  requiredFunc: PropTypes.func.isRequired,

  // 任意类型的数据
  requiredAny: PropTypes.any.isRequired,
};

使用 PropTypes.element 你可以指定只传递一个子代

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

class SayHello extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // 这一行很关键
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // 由于 `this.handleClick` 已经绑定至实例，因此我们才可以用它来处理点击事件
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}