如何在父组件中打印子组件 - 反应js

Question

我使用react-print打印组件。

import React from 'react';
import {connect} from 'react-redux';
import PrintTemplate from 'react-print';

class PrintWaybill extends React.Component{
  render(){
    return(
      <PrintTemplate>
                 <div>
                      <h3>All markup for showing on print</h3>
                      <p>Write all of your "HTML" (really JSX) that you want to show
                      on print, in here</p>
                      <p>If you need to show different data, you could grab that data
                      via AJAX on componentWill/DidMount or pass it in as props</p>
                      <p>The CSS will hide the original content and show what is in your
                      Print Template.</p>
                 </div>
               </PrintTemplate>
    )
  }
}
export default PrintWaybill;

我用父按钮和功能

导入它

 <button type="button" onClick={this.printWaybill} style={{cursor: 'pointer'}} className="btn btn-info">Print</button>&nbsp;

  printWaybill(){
    window.print();
  }

但我正在打印页面中的所有元素。

父组件如下。并且iam计划将值打印为道具..

 class Waybills extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          loading: true,
          start_date: moment(),
          end_date: moment()
        }
        this.handleSearch = this.handleSearch.bind(this);
        this.printWaybill = this.printWaybill.bind(this);
      }
      componentWillMount() {
        this.props.fetchWayBills('', '');
        this.setState({loading: false});
      }
      handleStartDate(date) {
        this.setState({start_date: date})
      }
      handleEndDate(date) {
        this.setState({end_date: date})
      }
      handleSearch() {
        let start_date = moment(this.state.start_date).format('YYYY-MM-DD');
        let end_date = moment(this.state.end_date).format('YYYY-MM-DD');
        this.props.fetchWayBills(start_date, end_date);
      }
      printWaybill(){
        window.print();
      }
      render() {
        return (
          <div className="animated fadeIn">
              <PrintWaybill/>
            <div className="row">
              <div className="col-sm-12">
                <div className="card">
                  <div className="card-header">

                    <strong>Waybills</strong>
                    <small>List</small>
                    <Link to={'admin/booking/add-waybill'}>
                      <button type="button" className="btn btn-success pull-right">Add New Waybill</button>
                    </Link>
                  </div>
                  <div className="card-block">
                    <div className="row">
                      <div className='form-group col-md-3'>
                        <label className='control-label'>Start Date
                        </label>
                        <DatePicker readOnly name="start_date" dateFormat="DD/MM/YYYY" className="form-control" selected={this.state.start_date} onChange={this.handleStartDate.bind(this)}/>
                      </div>
                      <div className='form-group col-md-3'>
                        <label className='control-label'>End Date
                        </label>
                        <DatePicker readOnly name="end_date" dateFormat="DD/MM/YYYY" className="form-control" selected={this.state.end_date} onChange={this.handleEndDate.bind(this)}/>
                      </div>
                      <button type="button" onClick={this.handleSearch} style={{
                        cursor: 'pointer'
                      }} className="btn btn-primary">Search</button>
                    </div>
                    <ReactTable loading={this.state.loading} defaultPageSize={10} showFilters={true} data={this.props.waybills.data.data} columns={[
                      {
                        header: 'LR_No',
                        accessor: 'waybill_lr_no' },
                         { header: 'Date', accessor: 'waybill_date' },
                         { header: 'From', accessor: 'waybill_from' },
                         { header: 'To', accessor: 'waybill_to' },
                         { header: 'Consigner', accessor: 'consigner_name' },
                         { header: 'Consignee', accessor: 'consignee_name' },
                         {
                         header:'Actions',
                         accessor:'waybill_id',
                         hideFilter: true,
                         sortable:false,
                         render: row =>(
                           <div>
                          <button type="button" onClick={this.printWaybill} style={{cursor: 'pointer'}} className="btn btn-info">Print</button>&nbsp;
                           </div>
                         )}
                       ]}/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
      }
    }