React

context

问题描述:
        In some cases, you want to pass data through the component tree without having to pass 
        the props down manually at every level. 
        
解决方法: 
        By adding childContextTypes and getChildContext to higher level component (the context provider),
        React passes the information down automatically and any component in the subtree can access it 
        by defining contextTypes.
        
例子: 

其中组件层次关系: MessageList----->Message------->Button

import PropTypes from 'prop-types';

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

# Button.contextTypes = {
  color: PropTypes.string
};

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

class MessageList extends React.Component {
#  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      // 不需要显式传递
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

# MessageList.childContextTypes = {
  color: PropTypes.string
};

JSX

Babel compiles JSX down to React.createElement() calls.

const element = (                      const element = React.createElement(
  <h1 className="greeting">                     'h1',                        -----> element
    Hello, world!                                {className: 'greeting'},    -----> props of the element
  </h1>                                          'Hello, world!'             -----> children(include element and text node)
);                                     );


也就是说在jsx文件中类似<li>{number}</li>的不要将其看成是html结构而是对React.createElement的调用

  

Props

function Welcome(props) {
  return <h1>Hello, {props.name, props.age}</h1>;
}

// 一个一个传递
const element = <Welcome name="YuMeijie" age="26"/>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

// 使用扩展运算符进行传递
const props={name:"YuMeiJie", age:"26"}
const element = <Welcome {...props} />;
ReactDOM.render(
  element,
  document.getElementById('root')
);