当使用道具将数据从父级传递给子级时，我的子级组件会显示在父级中

Question

当我使用道具将数据从父对象传递给子对象时，由于我已经在父组件的render方法中为子对象创建了链接，所以我的子组件会在父页面中呈现。我想单独从父组件中获取值并将其传递给并将其显示为单独的页面。有谁能帮助我克服这个问题。

父组件

var totalClickedArray = [];
$('.item').click(function() {
  var index = $('.item').index(this);
  totalClickedArray.push(index);
  var arraySize = totalClickedArray.length;
  console.log('last index:' + totalClickedArray[arraySize - 2],  ' new index:' + index);
});

子组件：

render() {
    this.models = this.props.vehicleData.models !== undefined
        ? this
            .props
            .vehicleData
            .models
            .map((item) => (
                <option value={item.Model_ID} key={item.Model_ID}>{item.Model_Name}</option>
            ))
        : [];


    return (

        <Col>
        <PolicyDetail vin={this.state.vin}/>
            <PolicyDetail email={this.state.email}/>

            <Card small>
                <CardHeader className="border-bottom">
                    <h6 className="m-0">Policy Details</h6>
                </CardHeader>
                <ListGroup flush>
                    <ListGroupItem className="p-3">
                        <Row>
                            <Col>
                                <Form onSubmit={this.onSubmit}>
                                    <Row form>
                                        <Col md="6" className="form-group">
                                            <label htmlFor="feEmailAddress">Customer Name</label>
                                            <FormInput id="cName" placeholder="Enter your name" name="cName" />
                                        </Col>

                                        <Col md="6">
                                            <label htmlFor="cAge">Customer Age</label>
                                            <FormSelect id="feInputState" onChange={this.onChange} name="cAge">
                                                <option>Choose...</option>
                                                {this.cAge}
                                            </FormSelect>
                                        </Col>
                                    </Row>

                                    <Row form>
                                        <Col md="6" className="form-group">
                                            <label htmlFor="feEmailAddress">Email</label>
                                            <FormInput
                                                name="email"
                                                type="email"
                                                placeholder="Email"
                                                onChange={this.onChange}/>
                                        </Col>
                                        <Col md="6" className="form-group">
                                            <label htmlFor="feEmailAddress">Phone</label>
                                            <FormInput
                                                name="phone"
                                                type="number"
                                                placeholder="Phone"
                                                onChange={this.onChange}/>
                                        </Col>
                                    </Row>

                                    <Row form>
                                        <Col md="4">
                                            <label htmlFor="vin">VIN</label>
                                            <FormInput
                                                id="vin"
                                                name="vin"
                                                placeholder="Enter your Vehicle Indentification Number"
                                                onChange={this.onChange}
                                                value={this.state.vin}/>
                                        </Col>