jsx,Code片段,代码实例,代码示例,代码片段库

jsx 反应生命周期

初始化组件

updateFromInside.jsx

class MyComponent extends Component() {
  shouldComponentUpdate(nextProps, nextState){
    // default return true, must make component update
  }

  componentWillUpdate(nextProps, nextState){

  }
  
  render(){
  
  }
  
  componentDidUpdate(prevProps, prevState){
    
  }
}

updateFromOutside.jsx

class MyComponent extends Component() {
  componentWillReceiveProps(nextProps){

  }

  shouldComponentUpdate(nextProps, nextState){
    // default return true, must make component update
  }

  componentWillUpdate(nextProps, nextState){

  }
  
  render(){
  
  }
  
  componentDidUpdate(prevProps, prevState){
    
  }
}

initialize.jsx

class MyComponent extends Component() {
  constructor(props){
    // Only execute one time
    super(props)
    this.state = {
      color: '#FF0000'
    }
  } 

  componentWillMount(){
    // Only execute one time
  }
  
  render(){
  
  }
  
  componentDidMount(){
    // Only execute one time
  }

}

jsx 测试

只是一个小测试

test

import React from "react";

import SwipeableViews from "react-swipeable-views";

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: "#fff",
    WebkitOverflowScrolling: "touch" // iOS momentum scrolling
  },
  slide1: {
    backgroundColor: "#FEA900",
    width: "20px",
    float: "left"
  },
  slide2: {
    overflowY: "auto",
    backgroundColor: "#B3DC4A"
  },
  slide3: {
    backgroundColor: "#6AC0FF"
  },
  slide4: {
    backgroundColor: "#FEA900"
  },
  button: {
    marginTop: 14
  }
};

const list = [];

for (let i = 0; i < 30; i += 1) {
  list.push(<div key={i}>{`item n°${i + 1}`}</div>);
}

const LastRunReports = () => (
  <SwipeableViews animateHeight enableMouseEvents>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      {list.slice(0, 1)}
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      {"This slide has a max-height limit:"}
      <br />
      <br />
      {list.slice(0, 30)}
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      {list.slice(0, 7)}
    </div>
  </SwipeableViews>
);

export default LastRunReports;

jsx Redux形式

表单级别onChange不是状态变化背后

snippet

// CONTAINER
handleChange(formfields) {
  console.log('formfields', formfields);
},

// PARENT COMPONENT - pass handleChange to form
<AccountsRF
  handleChange={handleChange}
/>

// FORM COMPONENT - submit on change. handleSubmit is redux-form's internal submit method that passes formfields - pass that to handleChange
<form onChange={() => setTimeout(handleSubmit(formfields => handleChange(formfields)))}>

// notes
// submit calls touchAll, so you'd have to display errors if dirty

jsx define_React_component

function-as-child

const Name = ({ children }) => children('World');

Name.propTypes = {
    children: PropTypes.func.isRequired,
};

---
<Name>
    {name => <div>Hello, {name}!</div> }
</Name>

higher-order_components

const withClassName = Component => props => ( 
  <Component {...props} className="my-class" /> 
)

stateless _functional_components

const Button = ({ value }, context) => <button>{context.currency}{value}</button> 
 
Button.propTypes = { 
  value: React.PropTypes.string, 
}

// Refs and event handlers
() => { 
  let input 
 
  const onClick = () => input.focus() 
 
  return ( 
    <div> 
      <input ref={el => (input = el)} /> 
      <button onClick={onClick}>Focus</button> 
    </div> 
  ) 
}

extendin_ React.Component

class Button extends React.Component {
  constructor(props) { 
    super(props);
 
    this.state = { 
      text: 'Click me!', 
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() { 
    console.log(this);
  }
  render() { 
    return <button onClick={this.handleClick}>{this.state.text}</button>
  } 
}

Button.propTypes = { 
  text: React.PropTypes.string, 
} 
 
Button.defaultProps = { 
  text: 'Click me!', 
}

createClass_factory

const Button = React.createClass({
  propTypes: { 
    text: React.PropTypes.string, 
  }, 
  getDefaultProps() { 
    return { 
      text: 'Click me!', 
    };
  },
  getInitialState() { 
    return { 
      text: 'Click me!', 
    };
  },
  handleClick() { 
    console.log(this);
  },
  
  render() { 
    return <button onClick={this.handleClick}>{this.props.text}</button>
  }, 
})

jsx conditional_statements

render-if

const isFunction = input => typeof input === 'function';

export default predicate => elemOrThunk =>
  predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;

conditional_statements.jsx

canShowSecretData() { 
  const { dataIsReady, isAdmin, userHasPermissions } = this.props 
  return dataIsReady && (isAdmin || userHasPermissions)
}

<div> 
  {this.canShowSecretData() && <SecretData />} 
</div>