我如何连接一个保存状态的组件和一个展示组件？

Question

我想连接 2 个不同的组件。一个组件保存状态，另一个是表示组件。我想将每个类别的产品显示到 CategoryContainer。但我需要在 ProductsList 中使用 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;

Answer 1

首先，您需要阅读更多有关 React 以及如何在组件之间将值作为 props 传递的信息。

其次，在您的渲染函数中，您需要将值作为道具传递给您的 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>
     );
  };
}

最后，为了在您的 ProductList 中看到 categoryId 和 categotyName，您只需要显示它们。

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;

我如何连接一个保存状态的组件和一个展示组件？

How can I connect a component that holds the state and a presentational component?

reactjs

redux

redux-form

react-redux