상세 한 해석 react 사용 react-bootstrap 바퀴 로 차 를 만든다.

지난 편 에서 우 리 는 react 의 웹 팩 환경 을 어떻게 설정 하 는 지 에 대해 이야기 했다.
react 입문 의 조합 환경(1)
아마 많은 사람들 이 공식 문 서 를 열 고 react 의 기초 지식 을 배 웠 을 것 이다.
있 든 없 든 react 를 소개 하기 전에 react-bootstrap 을 소개 하고 싶 습 니 다.
남 이 만 든 바퀴 를 먼저 사용 할 줄 알 면 더 빨리 운전 기사 가 될 수 있다.
네,소스 코드 드 립 니 다.

git clone https://github.com/lingjiawen/react_bootstrap_demo.git
cd react_bootstrap_demo
npm install
npm run dev

브 라 우 저 입력 열기:localhost:8080
 react-bootstrap 공식 사이트
이제 그것 이 무엇 을 할 수 있 는 지 보 자!
버튼
Button 을 사용 하여 단 추 를 설명 합 니 다.bsSize 는 다음 과 같은 네 가지 속성 이 있 습 니 다.각각 큰,중간,작은,작은 네 가지 크기 의 단 추 를 가 진 다음 Button Toolbar 로 감 쌀 수 있 습 니 다.

        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="large">Large button</Button>
          <Button bsSize="large">Large button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary">Default button</Button>
          <Button>Default button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="small">Small button</Button>
          <Button bsSize="small">Small button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
          <Button bsSize="xsmall">Extra small button</Button>
        </ButtonToolbar>

사용 효 과 는 다음 과 같 습 니 다:

well 을 사용 하여 단 추 를 감 싸 면 다음 과 같은 효 과 를 얻 을 수 있 습 니 다.(well 은 뒤에서 소개 합 니 다)

<div className="well" style={wellStyles}>
   <Button bsStyle="primary" bsSize="large" block>Block level button</Button>
   <Button bsSize="large" block>Block level button</Button>
</div>

bsStyle 속성 을 사용 하면 단추 의 상태 색 을 조정 할 수 있 습 니 다:

<Button>Default</Button>
<Button s>Primary</Button>
<Button bsStyle="success">Success</Button>

다음 그림 bsStyle 속성 은 info,warning,danger,link 입 니 다.

단 추 를 누 르 면 loading 을 누 르 고 결 과 를 기다 리 는 기능 을 수행 합 니 다:

클릭 하면 loading 이 되 는데.........................................................

class LoadingButton extends React.Component{
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { isLoading: false }
  }

  handleClick() {
    this.setState({isLoading: true});

    // This probably where you would have an `ajax` call
    setTimeout(() => {
      // Completed of async action, set loading state back
      this.setState({isLoading: false});
    }, 2000);
  }

  render() {
    let isLoading = this.state.isLoading;
    return (
      <Button
        bsStyle="primary"
        disabled={isLoading}
        onClick={!isLoading ? this.handleClick : null}>
        {isLoading ? 'Loading...' : 'Loading state'}
      </Button>
    );
  }
}

 버튼 의 아래로 당기 기와 위로 당기 기:
title 에서 Dropdown 속성 을 사용 하고 Dropdown Button 으로 감 싸 고 Dropup 을 위로 당 깁 니 다.

//  
<ButtonGroup>
  <Button>1</Button>
  <Button>2</Button>
  <DropdownButton title="Dropdown" id="bg-nested-dropdown">
     <MenuItem eventKey="1">Dropdown link</MenuItem>
     <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
</ButtonGroup>

//  
<ButtonToolbar>
  <SplitButton title="Dropup" dropup id="split-button-dropup">
    <MenuItem eventKey="1">Action</MenuItem>
    <MenuItem eventKey="2">Another action</MenuItem>
    <MenuItem eventKey="3">Something else here</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey="4">Separated link</MenuItem>
  </SplitButton>
</ButtonToolbar>

둘째,리스트
간단 한 목록:

        <ListGroup>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" active>Link 1</ListGroupItem>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link 2</ListGroupItem>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" disabled>Link 3</ListGroupItem>
        </ListGroup>

ListGroup 소 포 를 사용 하면 ListGroup Item 이 하위 요소 입 니 다.
active:선택 되 었 습 니 다disable:클릭 이 벤트 를 취소 할 수 있 습 니 다
표: 

    　　　　　　<Table striped bordered condensed 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>  

숨겨 진 패 널 클릭: 

class CollapsiblePanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true
    };
  }

  render() {
    return (
      <div>
        <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
              /  
        </Button>
        <Panel collapsible expanded={this.state.open}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </Panel>
      </div>
    );
  }
} 

3.Overlays
팝 업 창 클릭:

class StaticMarkup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {dpName:false};
    this.onDisplayOverlays = this.onDisplayOverlays.bind(this);
    this.onCloseOverlays = this.onCloseOverlays.bind(this);
  }


  onDisplayOverlays() {
    this.setState({
      dpName:true
    });
  }

  onCloseOverlays() {
    this.setState({
      dpName:false
    });
  }

  render() {
    if(this.state.dpName)
      return (
        <div>
          <Button
            bsStyle="primary"
            onClick={this.onDisplayOverlays}>
               
          </Button>
          <div className="static-modal" id="static_modal">
            <Modal.Dialog>
              <Modal.Header>
                <Modal.Title>Modal title</Modal.Title>
              </Modal.Header>

              <Modal.Body>
                One fine body...
              </Modal.Body>

              <Modal.Footer>
                <Button onClick={this.onCloseOverlays}>Close</Button>
                <Button bsStyle="primary">Save changes</Button>
              </Modal.Footer>

            </Modal.Dialog>
          </div>
        </div>
      );
    else
      return (
        <div>
          <Button
            bsStyle="primary"
            onClick={this.onDisplayOverlays}>
               
          </Button>
        </div>
      );
  }
}

표시,숨겨 진 overload 를 누 르 십시오.

class CustomOverlays extends React.Component{
  constructor(props) {
    super(props);
    this.state = {show: true};
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState({ show: !this.state.show });
  }

  render() {
    const sharedProps = {
      show: this.state.show,
      container: this,
      target: () => ReactDOM.findDOMNode(this.refs.target)
    };

    return (
      <div style={{ height: 100, paddingLeft: 150, position: 'relative' }}>
        <Button ref="target" onClick={this.toggle}>
          Click me!
        </Button>

        <Overlay {...sharedProps} placement="left">
          <Tooltip id="overload-left">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="top">
          <Tooltip id="overload-top">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="right">
          <Tooltip id="overload-right">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="bottom">
          <Tooltip id="overload-bottom">Tooltip overload!</Tooltip>
        </Overlay>
      </div>
    );
  }
}

 
넷 째,윤파

class CarouselInstance extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Carousel>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    );
  }
}

5.유용 한 아이콘

class MiscellaneousInstance extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div>
          <ButtonToolbar>
            <ButtonGroup>
              <Button><Glyphicon glyph="align-left" /></Button>
              <Button><Glyphicon glyph="align-center" /></Button>
              <Button><Glyphicon glyph="align-right" /></Button>
              <Button><Glyphicon glyph="align-justify" /></Button>
            </ButtonGroup>
          </ButtonToolbar>
          <ButtonToolbar>
            <ButtonGroup>
              <Button bsSize="large"><Glyphicon glyph="star" /> Star</Button>
              <Button><Glyphicon glyph="star" /> Star</Button>
              <Button bsSize="small"><Glyphicon glyph="star" /> Star</Button>
              <Button bsSize="xsmall"><Glyphicon glyph="star" /> Star</Button>
            </ButtonGroup>
          </ButtonToolbar>
        </div>
        <div>
          <h1>Label <Label>New</Label></h1>
          <h2>Label <Label>New</Label></h2>
          <h3>Label <Label>New</Label></h3>
          <h4>Label <Label>New</Label></h4>
          <h5>Label <Label>New</Label></h5>
          <p>Label <Label>New</Label></p>
        </div>
      </div>
    );
  }
}

양식
폼 의 기본 클래스 함 수 는:

function FieldGroup({ id, label, help, props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

그리고 FieldGroup 패키지 사용 하기:

　　　　　　　　　　<FieldGroup
          id="formControlsText"
          type="text"
          label="Text"
          placeholder="Enter text"
        />

양식 을 쉽게 실현 할 수 있 습 니 다!만약 당신 이 react 에 대해 알 고 있다 면,원생 의 양식 은 직접 사용 할 수 없다 는 것 을 알 수 있 습 니 다.이 구성 요 소 는 많이 간소화 되 었 지만,나 는 실제 사용 해 본 적 이 없어 서 효과 가 어떤 지 모르겠다.

제 가 쓴 것 은 벽돌 을 던 져 옥 을 끌 어 올 리 는 것 일 뿐 입 니 다.다만 여러분 이 react-bootstrap 이 할 수 있 는 일 을 조금 만 알 아 주 셨 으 면 좋 겠 습 니 다.
더 자세 한 방법 과 속성 은 공식 사이트 에 들 어가 문 서 를 조회 하고 소스 코드 를 열 어 자체 적 으로 연구 하 십시오.
일부 공식 demo 는 완전히 주지 않 았 습 니 다.앞의 제 가 준 demo 를 실행 하고 소스 코드 를 확인 할 수 있 습 니 다.(그러나 저도 다 쓰 지 않 았 고 구조 가 복잡 합 니 다)
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.