คอนเทนเนอร์และส่วนประกอบของคลาสเดียวกัน

ฉันยังใหม่กับ React และ Redux

ฉันกำลังพยายามใช้คลาสเป็นคอนเทนเนอร์ Redux (ดังนั้นสถานะได้รับการจัดการโดยตัวลด) และยังเป็นส่วนประกอบแบบคลาสสิกด้วยอินสแตนซ์อื่น (ไม่มีลิงก์ไปยังตัวลด)

โดยพื้นฐานแล้วบางสิ่งเช่นนี้:

class BaseLogo extends Component {

    constructor(props){
        super(props);
    }

    render(){
        let link = this.props.linkLogo || this.props.link;
        return (
            <Link className="btn btn-primary" to={link}>
                {this.props.logoName}
            </Link>
        );
    }
}

function mapStateToProps(state){
    return {
        linkLogo: state.linkLogo
    };
}

let Logo = connect(mapStateToProps)(BaseLogo);
export {Logo, BaseLogo as Button};

ดังนั้นฉันต้องการใช้ Logo เป็นคอนเทนเนอร์และ Button เป็นส่วนประกอบ (ไม่มีตัวลด) พร้อมอุปกรณ์ประกอบฉากที่ระบุ

แต่ตามวิธีที่ Redux ผูกไว้ เมื่อใดก็ตามที่ฉันสร้างอินสแตนซ์ของโลโก้คลาส จะมีตัวลดขนาด

มีวิธีใดบ้างที่ฉันสามารถแยก connect()() ออกจากคลาสได้

ขอบคุณ


person Quoc-Hao Tran    schedule 21.07.2017    source แหล่งที่มา
comment
คุณได้เลือกวิธีที่สับสนมากในการตั้งชื่อสิ่งต่างๆ ในโมดูลนี้ ทำไมไม่เปลี่ยน class Logo ให้เป็น class BaseLogo จะได้ไม่ต้องเปลี่ยนชื่อที่ลงท้ายด้วย export ... as อย่างสับสนล่ะ   -  person Jordan Running    schedule 21.07.2017
comment
เนื่องจากคำถามของคุณไม่ชัดเจน โมดูลนี้จะส่งออกสองคลาส: โลโก้ (หรือที่เรียกว่า logo1) ซึ่งเป็นคลาสที่เชื่อมต่อกับ Redux และ Button ซึ่งเป็น React.Component ธรรมดาที่ไม่มีการเชื่อมต่อกับ Redux หากคุณไม่ต้องการส่วนประกอบที่เชื่อมต่อกับ Redux ให้นำเข้าปุ่มแทนโลโก้   -  person Jordan Running    schedule 21.07.2017
comment
ใช่ ฉันจะแก้ไขชื่อ แต่ปัญหาก็คือ แม้ว่าฉันจะนำเข้าปุ่ม แต่มันก็แชร์สถานะของโลโก้ (เพราะมันยังคงเชื่อมต่อกับตัวลดเนื่องจาก connect)   -  person Quoc-Hao Tran    schedule 21.07.2017
comment
ไม่มันไม่ได้ ปุ่มไม่ได้เชื่อมต่อกับร้านค้า Redux หรือตัวลดขนาดของคุณ แต่อย่างใด เฉพาะโลโก้เท่านั้นที่เชื่อมต่อ Redux นี่คือ สิ่งที่เอกสารพูด: มันไม่ได้แก้ไขคลาสองค์ประกอบที่ส่งผ่านไป; แต่จะ ส่งคืน คลาสส่วนประกอบที่เชื่อมต่อใหม่ให้คุณใช้แทน   -  person Jordan Running    schedule 21.07.2017
comment
ขอบคุณ มันเป็นเพราะการใช้งานที่ไม่ดีของฉันเอง ฉันพบข้อผิดพลาด   -  person Quoc-Hao Tran    schedule 21.07.2017


คำตอบ (1)


ฉันพบข้อผิดพลาด เนื่องจากมีการใช้โค้ดไม่ถูกต้อง ขอบคุณทุกคน

person Quoc-Hao Tran    schedule 21.07.2017