javascript - Reactjs如何将当前页面的props传递给子页面

Question

这是Clients_info.js

在该组件的 props 中，它有多个值。

现在我想将该组件中的所有 props 传递给 Modalbox 组件。

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

我怎样才能做到这一点？谢谢!

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>
    );
  }
}

Answer 1

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

应该完成这项工作