Создать разборный компонент карты - PullRequest
Новая
       8

Создать разборный компонент карты

0 голосов
/ 03 января 2019

Я хочу представить несколько разных типов информации в отдельных карточках. Каждая карта должна открываться и закрываться при нажатии на заголовок.

До сих пор я писал этот фрагмент кода: 

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';

// Importing Styles
import './styles.scss';

class CardToggle extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired
  };

  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };

    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick = () => {
    this.setState({
      isOpen: !isOpen
    });
  };

  render() {
    const { title } = this.props;
    return (
      <div className="card my-2 border-0 rounded-0">
        <div className="card-body d-flex">
          <h4>
            <a className="text-secondary" href="">
              {title}
            </a>
          </h4>
        </div>
      </div>
    );
  }
}

export default CardToggle;

У меня есть несколько проблем. Произошла ошибка, что handleToggleClick не определено. Кроме того, каждый компонент, который я использую внутри этого компонента, не помещается в тело карты: он помещается под ...

Итак, мне нужно поместить содержимое компонента, который я хочу, чтобы оно появлялось и исчезало внутри компонента, и заставить работать компонент свертывания.

Я использую чистые Bootstrap 4 классы для карточек, заголовков и текста, и я хочу использовать чистую реакцию для функций открытия / закрытия ....

Вот пример компонента, который я хочу вставить в компонент карты: 

import React, { Component } from 'react';
import CardToggle from '../CardToggle';

import { ThePermissions } from '../../constants';

class Permissions extends Component {
  render() {
    return (
      <div>
        <CardToggle title="Permissions" />
        <button className="btn btn-primary">Submit</button> // From 
         here it is outside the card
        <div>
        More Content here
        </div>
      </div>
    );
  }
}

export default Permissions;

Может кто-нибудь дать мне руку. Я не хочу использовать библиотеку, и я хочу, чтобы компонент можно было повторно использовать. Я также хочу обработать дополнительную логику в отношении show/hide на главном обзорном экране, который уже огромен.

Если вы тоже хотите это увидеть, просто пингуйте меня.

1 Ответ

0 голосов
/ 03 января 2019

1. За ошибку не определено, вместо 

handleToggleClick = () => {
    this.setState({
        isOpen: !isOpen
    });
};

попробовать 

handleToggleClick() {
    this.setState({
        isOpen: !isOpen
    });
}

2. для содержимого, не отображаемого внутри компонента, попробуйте: 

render() {
    const { title, children } = this.props;
    return (
        <div className="card my-2 border-0 rounded-0">
        <div className="card-body d-flex">
            <h4>
            <a className="text-secondary" href="">
                {title}
            </a>
            </h4>
            <div className="/*some class*/">
                 {children} // this is where the content will be shown 
            </div>
        </div>
        </div>
    );
}
...