6 posts tagged with "react"

import React from 'react';
import ReactHlsPlayer from "react-hls-player"; 
//这个库有缺陷 好久没维护了 只支持到react16
//另外video必须是.m3u8格式的

export default class HlsPlayer extends React.Component {
  render(){
    const { url } = this.props
    return (
       <ReactHlsPlayer
          src={url}
          autoPlay={false}
          controls={true}
          width="100%"
          height="auto"
      />
      )
  }
}

<HlsPlayer
  src={"https://video.scott-xiong.com/movie/2/output.m3u8"}
/>

import { Empty } from 'antd';

const App = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
export default App;

import { Button, Space } from 'antd';


<Button type="primary" size='small' danger>
      Button
</Button>

import { AreaChartOutlined } from '@ant-design/icons';

<AreaChartOutlined />

import { Tag } from 'antd';

const App = () => <Tag color="magenta">magenta</Tag>;
export default App;

import { Pagination } from 'antd';

const App = () => <Pagination 
      defaultCurrent={1} 
      pageSize={page_size} 
      total={all_items} 
      current={current_page} 
      onChange={this.pageChange}
 />;
export default App;

import React, { Component } from 'react'
import { Table} from 'react-bootstrap';

export default class Test extends Component {
  render() {
    return (
      <div>
        <Table striped bordered condensed='true' hover>
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colSpan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </Table>

      </div>
    )
  }
}

import { Input } from 'antd';
const App = () => <Input placeholder="Basic usage" />;
export default App;

import { Input } from 'antd';
const { Search } = Input;

<Search
      placeholder="input search text"
      allowClear
      enterButton="Search"
      size="large"
      onSearch={onSearch}
    />

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/test',
    createProxyMiddleware({
      target: 'http://127.0.0.1:8002',
      changeOrigin: true,
    })
  );
};

import React, { Component } from 'react'
import pageStyle from '../../page.module.css'
// import homeStyle from './index.module.css'
import axios from "axios";
export default class ExampleHome extends Component {
    state = {
        arr:[]
    }
    componentDidMount() {
        axios.post("/test/1",{}).then(
            res=>{
                console.log(res.data.data)
                this.setState({
                    arr : res.data.data
                })
            },
            err=>{}
        )
    }

    render() {
        return (
            <div className={pageStyle.container}>
                {
                    this.state.arr.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </div>
        )
    }
}

import React, { Component } from 'react'
import pageStyle from '../../page.module.css'
// import homeStyle from './index.module.css'
import axios from "axios";
export default class ExampleHome extends Component {
    state = {
        arr:[]
    }
    componentDidMount() {
        const BASE_URL = "http://127.0.0.1:8002"
        axios.post(`${BASE_URL}/test/1`,{}).then(
            res=>{
                console.log(res.data.data)
                this.setState({
                    arr : res.data.data
                })
            },
            err=>{}
        )
    }

    render() {
        return (
            <div className={pageStyle.container}>
                {
                    this.state.arr.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </div>
        )
    }
}

constructor(props) {
  super(props)
}

<ul>
   {
        this.state.list.map((item,index)=>{
              return <li key={index} dangerouslySetInnerHTML={__html: item}></li>
       })
   }
</ul>

const name = this.props.name;
const age = this.props.age;

//等效于
const {name, age} = this.props;

var list = ["apple","pear","orange"]
var another = [...list] //把list中的元素一一展开，再用[]包裹成array

const list = [...this.state.list,"apple"]

this.setState({
    list,
    inputValue: ""
})