如何将prop从父组件传递到子组件并使用react-redux在子组件中接收道具

时间:2020-01-17 09:26:58

标签: react-redux

我的父母组件类似于-Requestdetails组件

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.Rectangle;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JScrollPane;
import javax.swing.JTree;
import javax.swing.Scrollable;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;

/**
 * <code>TestScroll</code>.
 */
public class TestScroll {

    private static final String TEXT = "It's a very very very long text for label to test whether it can be scrolled";

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new TestScroll()::startUp);
    }

    /**
     * 
     */
    private void startUp() {
        JFrame frm = new JFrame();
        frm.add(new JScrollPane(new ScrollableLabel(TEXT)), BorderLayout.NORTH);
        frm.add(new JScrollPane(new JTree()));
        frm.add(new JScrollPane(new ScrollableLabel("Small text")), BorderLayout.SOUTH);
        frm.setSize(200, 300);
        frm.setLocationRelativeTo(null);
        frm.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
        frm.setVisible(true);
    }

    private class ScrollableLabel extends JLabel implements Scrollable {

        /**
         * 
         */
        public ScrollableLabel(String text) {
            super(text);
        }

        @Override
        public Dimension getPreferredScrollableViewportSize() {
            if (getParent() == null || !(getParent().getParent() instanceof JScrollPane)) {
                return getPreferredSize();
            }
            JScrollPane scroller = (JScrollPane) getParent().getParent();
            Dimension actualSize = getParent().getSize();
            Dimension pref = getPreferredSize();
            Dimension result = new Dimension();
            result.height = pref.height
                    + pref.width < actualSize.width ? 2 : scroller.getHorizontalScrollBar().getPreferredSize().height + 2;
            result.width = pref.width
                    + pref.height < actualSize.height ? 2 : scroller.getVerticalScrollBar().getPreferredSize().width + 2;
            return result;
        }

        @Override
        public int getScrollableUnitIncrement(Rectangle visibleRect, int orientation, int direction) {
            // TODO Auto-generated method stub
            return 10;
        }

        @Override
        public int getScrollableBlockIncrement(Rectangle visibleRect, int orientation, int direction) {
            // TODO Auto-generated method stub
            return 30;
        }

        @Override
        public boolean getScrollableTracksViewportWidth() {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public boolean getScrollableTracksViewportHeight() {
            // TODO Auto-generated method stub
            return false;
        }

    }
}

子组件-TopBar组件

import React, { Component } from "react";
import TopBarComponent from '../../common/TopBar/topBar'
export default class RequestDetailsComponent extends Component {
    showBreadcrumb: boolean;
    breadcrumbs: { title: string; navigate: string; state: boolean; }[];
    constructor(props: any) {
        super(props)
        this.showBreadcrumb = true;
        this.breadcrumbs = [
            { title: 'Dashboard', navigate: 'dashboard', state: true },
            { title: 'Requests', navigate: 'requestList', state: true },
            { title: 'Request Details', navigate: '', state: false }]
    }
    render() {
        return (
           <div>
               <TopBarComponent showBreadcrumb={this.showBreadcrumb} breadcrumbs={this.breadcrumbs}/>
           </div>
        );
     }
}

我想将'showBreadcrumb'和'breadcrumbs'数组传递给Requestdetails组件的topBar组件。但无法在react-redux中完成。

我过去一直采用上述方法进行响应,但是现在我正在尝试使用此react-redux。但未能通过。 请告知我该如何通过。

1 个答案:

答案 0 :(得分:2)

假设您已经正确配置了Redux存储库和提供程序,并且提供了正确的配置,则无论是否相信,将UI组件连接到Redux存储库的方法都是通过Ingredient.objects.create(**info, dish_id = dish) 的{​​{3}} HOC。

react-redux