Я создал базовый компонент (Content. js), и вместо того, чтобы создавать дубликаты и модифицировать его небольшую часть каждый раз в моем проекте, я хочу отослать другие мои компоненты к этому базовому файлу. Я хочу знать, правильна ли эта процедура, и как я могу реализовать эту процедуру в моем проекте?
в индексе. js, я хочу отправить компонент Head компоненту Content и показать его в компоненте Content.
индекс:
import React , { Component } from "react";
import RightMenu from "../partials/menus/RightMenu";
import Content from "../partials/Content";
import Head from "../partials/contents/head";
import { Card , Container , Row , ListGroup , Table , Col } from "react-bootstrap";
import withRedux from "next-redux-wrapper";
import { initStore } from "../../redux/store";
import { bindActionCreators } from 'redux';
import { PRODUCTS } from "../partials/consts/actionsConstants";
import { products, dispachActions } from "../../redux/actions";
import ProductsItem from "../partials/contents/ProductsItem";
import $ from "jquery";
class Index extends Component {
render(){
return(
<React.Fragment>
<Container>
<Row>
<RightMenu />
<Content title="storage" k={Head} />
</Row>
</Container>
</React.Fragment>
)
}
}
export default Index;
Голова:
import React from 'react';
export default function Head() {
return (
<div id="storage">
<Table striped bordered hover>
<thead>
<tr>
<th>id</th>
<th>category</th>
<th>name</th>
</tr>
</thead>
<tbody>
{productRow}
</tbody>
</Table>
</div>
)
}
Содержание:
import React, { Component } from "react";
import { Col, Card } from 'react-bootstrap';
class Content extends Component {
render() {
let {title, k} = this.props;
console.log(k);
return (
<Col sm={9} className="text-right">
<Card >
<Card.Header>{title}</Card.Header>
<Card.Body>
{k}
<h1>kkk</h1>
</Card.Body >
</Card>
</Col>
)
}
}
export default Content;