Reactjs如何将当前页面的道具传递到子页面中

Reactjs How to pass the props of current page into child page

本文关键字:当前页 Reactjs      更新时间:2023-09-26

这是Clients_info.js

在这个组件的道具中,它有几个值。

现在我想把这个组件中的所有props传递给Modalbox组件。

我知道如何将当前state的值作为props传递给渲染函数中的子组件。但是从propsprops。。。

我怎么能做到呢?谢谢

import React from "react";
import Modalbox from './Client_modal'
require('../../css/Clients.scss');
var $ = require ('jquery');
export default class Clients_info extends React.Component {
  constructor(props) {
    super(props);
  }
  //Invoked once, both on the client and server, immediately before the initial rendering occurs.
  componentWillMount(){
  }
  render() {
    return(
      <div id='tabbox-order' className='clients_info'>
        <div id='clientsInfo_wrapper'>
          <div id='clientsInfo_row'>
            <div id='ava_wrapper'>
              <img id='clietnsInfo_avatar'></img>
              <p>{this.props.client.name}</p>
            </div>
            <div id='infor_wrapper'>
              <p><i class="material-icons">email</i> Email: {this.props.client.email}</p>
              <p><i class="material-icons">phone</i> Phone: {this.props.client.phone}</p>
              <p><i class="material-icons">location_on</i> Address: {this.props.client.loc}</p>
              <p><i class="material-icons">my_location</i> Zip Code: {this.props.client.zip}</p>
            </div>
          </div>
          <div id='key' >
            <i  class="material-icons">vpn_key</i>{this.props.client.key}
          </div>
          <div id='Cutting' ></div>
          <div>
            <h4>Pets Information</h4>
            { this.props.pets.map(function(pet) {
                  return(
                    <div>
                      <div className='row'key={pet.id}>
                        <div className='col-md-3' >avatar</div>
                        <div className='col-md-3' >{pet.petName}</div>
                        <div className='col-md-3' >{pet.breed}</div>
                        <div className='col-md-3' >{pet.age}</div>
                      </div>
                      <div id='pet-detail'>
                        <p>Extra Information:</p>
                        <input placeholder='This dog is crazy!!!'>
                        </input>
                      </div>
                    </div>
                  )
              })
            }
          </div>
          <div id='Cutting' ></div>
          <Modalbox/>
        </div>
      </div>
    );
  }
}

<Modalbox pets={ this.props.pets }/>

应该做的工作