zoukankan      html  css  js  c++  java
  • 对react的研究0

    对react的研究
    1.class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, mountNode );
    2.class Timer extends React.Component {
      constructor(props) {
        super(props);
        this.state = { seconds: 0 };
      }
    
      tick() {
        this.setState(state => ({
          seconds: state.seconds + 1
        }));
      }
    
      componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
      }
    
      componentWillUnmount() {
        clearInterval(this.interval);
      }
    
      render() {
        return (
          <div>
            Seconds: {this.state.seconds}
          </div>
        );
      }
    }
    
    ReactDOM.render(<Timer />, mountNode);

    3.

    class TodoApp extends React.Component {
      constructor(props) {
        super(props);
        this.state = { items: [], text: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
      render() {
        return (
          <div>
            <h3>TODO</h3>
            <TodoList items={this.state.items} />
            <form onSubmit={this.handleSubmit}>
              <label htmlFor="new-todo">
                What needs to be done?
              </label>
              <input
                id="new-todo"
                onChange={this.handleChange}
                value={this.state.text}
              />
              <button>
                Add #{this.state.items.length + 1}
              </button>
            </form>
          </div>
        );
      }
    
      handleChange(e) {
        this.setState({ text: e.target.value });
      }
    
      handleSubmit(e) {
        e.preventDefault();
        if (!this.state.text.length) {
          return;
        }
        const newItem = {
          text: this.state.text,
          id: Date.now()
        };
        this.setState(state => ({
          items: state.items.concat(newItem),
          text: ''
        }));
      }
    }
    
    class TodoList extends React.Component {
      render() {
        return (
          <ul>
            {this.props.items.map(item => (
              <li key={item.id}>{item.text}</li>
            ))}
          </ul>
        );
      }
    }
    
    ReactDOM.render(<TodoApp />, mountNode);
    class MarkdownEditor extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = { value: 'Hello, **world**!' };
      }
    
      handleChange(e) {
        this.setState({ value: e.target.value });
      }
    
      getRawMarkup() {
        const md = new Remarkable();
        return { __html: md.render(this.state.value) };
      }
    
      render() {
        return (
          <div className="MarkdownEditor">
            <h3>Input</h3>
            <label htmlFor="markdown-content">
              Enter some markdown
            </label>
            <textarea
              id="markdown-content"
              onChange={this.handleChange}
              defaultValue={this.state.value}
            />
            <h3>Output</h3>
            <div
              className="content"
              dangerouslySetInnerHTML={this.getRawMarkup()}
            />
          </div>
        );
      }
    }
    
    ReactDOM.render(<MarkdownEditor />, mountNode);
  • 相关阅读:
    SQL----Scalar 函数
    SQL----Group By and Having
    SQL--合计函数(Aggregate functions):avg,count,first,last,max,min,sum
    SQL 函数
    Auto-increment 自动增长
    sql--ALTER
    sql--Drop语句
    sql--index 索引
    sql--select into,create database,create table,Constraints
    sql--union
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/9725170.html
Copyright © 2011-2022 走看看