Как я могу связать компонент, который содержит состояние и компонент представления? - PullRequest
Новая
       33

Как я могу связать компонент, который содержит состояние и компонент представления?

0 голосов
/ 05 октября 2018

Я хочу соединить 2 разных компонента.Один компонент содержит состояние, а другой - компонент представления.Я хочу показать продукты для каждой категории CategoryContainer.Но мне нужно иметь categoryId в Списке продуктов, чтобы показать продукты и установить правильные значения для соответствующих свойств некоторых компонентов (таких как TextBox, Dropdown).Любые идеи?

Компонент, который содержит состояние: 

render() {
    const {
      categoryId,
      categoryName
    } = this.props;
    return (
        <MainComponent>
                <label>Your categoryId is: </label>
                {categoryId}
              <label>Your categoryName is: </label>
                {categoryName}
              <label>The products of this category are: </label>
            <div>
              <ProductLists />
            </div>
          </MainComponent>
  };
}


const mapStateToProps = (state, ownProps) => {
  return {
    categoryName:
      selectAttributelById(state, ownProps.categoryId) &&
      selectAttributelById(state, ownProps.categoryId).get("categoryName")
  };
};

CategoryContainer = connect(
  mapStateToProps
)(toJS(CategoryContainer));

CategoryContainerWrapped.propTypes = {
  categoryName: PropTypes.bool
};

export default CategoryContainer;

Презентационный компонент: 

class ProductLists extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false
    };
  }

  render() {
    return (
      <div>
      <TextBox/>
      <DropDownList />
      </div>
    );
  }
}

ProductLists.propTypes = {
};

export default ProductLists;

1 Ответ

0 голосов
/ 05 октября 2018

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

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

render() {
    const {
      categoryId,
      categoryName
    } = this.props;

    return (
        <MainComponent>
            <label>Your categoryId is: </label>
            {categoryId}

            <label>Your categoryName is: </label>
            {categoryName}

            <label>The products of this category are: </label>

            <div>
                <ProductLists categoryId={categoryId} categoryName={categoryName} />
            </div>
        </MainComponent>
     );
  };
}

Наконец, для того, чтобы увидеть categoryId и categoryotyName в вашем ProductList, вам просто нужно отобразить их. 

class ProductLists extends Component {

    constructor(props) {
        super(props);
        this.state = {
            expanded: false
        };
    }

    render() {
        return (
            <div>
                CategoryId: {this.props.categoryId}
                CategoryName: {this.props.categoryName}
               <TextBox/>
               <DropDownList />
           </div>
        );
    }
}

ProductLists.propTypes = {
    categoryId: PropTypes.number,
    categoryName: PropTypes.string
};

export default ProductLists;
...