Как сделать умные компоненты в React еще более умными, сделав его более гибким, рендеринг других компонентов дампа - PullRequest
Новая
       7

Как сделать умные компоненты в React еще более умными, сделав его более гибким, рендеринг других компонентов дампа

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

В настоящее время у меня есть одна проблема с контейнерным подходом, когда дело касается рендеринга компонентов дампа.

Предположим, у меня есть ProductContainer , как показано ниже: 

class ProductContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = { products: [] };
    }

    getAll(){
      // get all products from store
    }

    addNew(){
      // store the product to the store
    }

     render() {
      return (
        <ListProductComponent products={this.state.products}>
        <AddProductComponent/>
      )
     }
}

IМожно использовать RedEx для управления магазином, но в этом случае я просто хочу сделать его максимально простым.

Тогда у меня есть еще два компонента дампа, такие как ListProductComponent и AddProductComponent . 

const ListProductComponent = (props) => {
    return (
       <h2>Print out products from {props.products}</h2>
    );
};

const AddProductComponent = (props) => {
    return (
       <h2>AddProductComponent</h2>
    );
};

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

В настоящее время у меня есть оба компонента, которые отображаются в моей функции рендеринга из контейнера, я на самом деле хотел бы оставить контейнер для выполнения операции CRUD для продуктаи затем использовать один и тот же компонент для перечисления продуктов, добавляя новый продукт во все другие компоненты дампа.

С текущим значениемЯ не могу добиться этого, я вынужден иметь список и добавить новый продукт в том же виде.

Некоторые люди предлагают, чтобы ListProductContainer и addProductContainer раздельно обрабатывали операции crud, но не слишком ли это разделение?На самом деле я хотел бы оставить Crud в одном интеллектуальном компоненте.

Как мне добиться этого, имея более гибкий рендеринг для очень интеллектуального компонента.

ОБНОВЛЕНИЕ: Возможно, я хотел бы иметь при рендеринге контейнераОтчасти что-то вроде этого, но я не уверен, что что-то подобное сработает.

function renderComponent(Component) {
         return <Component />;
}

и затем вызывать этот renderComponent внутри render () для контейнера, но как тогда передать состояние / хранилище или другие атрибуты компоненту дампа?

Учитывая, что ябудет в состоянии сделать то же самое, как это: 

<ListProductComponent products={products} fetchProducts={this.getAll}/>

возможность передавать состояние и вызывать методы родителя / контейнера.

1 Ответ

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

Если я правильно вас понимаю, вы хотите условно визуализировать компонент? Для этого вам потребуется использовать троичный оператор в вашем методе рендеринга.

Например: 

class ProductContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
  }

  getAll(){
    // get all products from store
  }

  addNew(){
    // store the product to the store
  }

  render() {
    return (
      {
        this.state.products.length ? 
          <ListProductComponent products={this.state.products}>
        :
          <AddProductComponent/>
      }
    ) 
  }
}

Вам также нужно будет использовать this.setState({ products: [ // products object ] }) после добавления продукта, чтобы React повторно отобразил компонент и показал правильные данные.

Подробнее об этом можно прочитать здесь

...