นี่คือรหัสส่วนประกอบการลงทะเบียน -

const RegisterView = () => {
  return (
    <Background>
      <h1>ddd</h1>
    </Background>
  );
};

scss พื้นหลัง -

.mainContainer {  
  display: flex;
  flex-direction: row;
  min-height: 80vh;
  min-width: 140vh;
  align-items: center;
  justify-content: center;
  background-color: map-get($colors, primary);
  padding: 100px;
  position: relative;
  z-index: 10;
  
  &:after {
    background-color: #fff;
    border-radius: 15px;
    content: '';
    position: absolute;
    top: 90px;
    left: 140px;
    right: 140px;
    bottom: 90px;
    z-index: -1;
  }
}

มุมมององค์ประกอบพื้นหลัง.tsx -

import classes from './Background.module.scss';

const BackgroundView = () => {
  return (
    <div className={classes['mainContainer']}></div>
  );
};

BackgroundView.displayName = 'Background';
BackgroundView.defaultProps = {};

export default BackgroundView;

ส่วนประกอบพื้นหลัง tsx -

import BackgroundView from './Background.view';

const Background = () => {
  return (
    <BackgroundView />
  );
};

Background.displayName = 'Background';
Background.defaultProps = {};

export default Background;

Backgroundองค์ประกอบที่ควรจะเป็นเสื้อคลุมสำหรับส่วนประกอบอื่น ๆ ทั้งหมด นี่คือสิ่งที่ฉันได้รับตอนนี้ -

ใส่คำอธิบายภาพที่นี่

ไม่พบเนื้อหาภายในคอมโพเนนต์ มีปัญหาอะไร

ตอบ

คุณได้ห่อBackgroundViewในBackgroundองค์ประกอบที่คุณเขียนเช่นนี้

const Background = () => {
  return (
    <BackgroundView />
  );
};

ที่โยนเด็ก ๆ ที่คุณให้ไว้กับBackgroundส่วนประกอบ หากคุณต้องการใส่ลูกเหล่านั้นในBackgroundViewคุณต้องทำอย่างชัดเจน:

const Background = ({children}) => {
  return (
    <BackgroundView>{children}</BackgroundView>
  );
};

คุณมีปัญหาเดียวกันกับBackgroundViewดังนั้น:

const BackgroundView = ({children}) => {
  return (
    <div className={classes['mainContainer']}>{children}</div>
  );
};

มันยังไม่ชัดเจนว่าทำไมคุณถึงมีBackgroundเลย คุณสามารถใช้BackgroundViewโดยตรง


เช่นเดียวกับหมายเหตุด้านข้าง ไม่จำเป็นต้องมี()องค์ประกอบ JSX รอบ ๆ (หากคุณเริ่มองค์ประกอบ JSX ในบรรทัดด้วยreturn, ไม่ใช่บรรทัดถัดไป):

const Background = ({children}) => {
  return <BackgroundView>{children}</BackgroundView>;
};

และที่จริงแล้ว ถ้าคุณต้องการ คุณสามารถใช้ฟังก์ชันลูกศรในรูปแบบกระชับ:

const Background = ({children}) => <BackgroundView>{children}</BackgroundView>;

แต่นั่นก็เป็นเพียงสิ่งที่มีสไตล์ คุณอาจต้องการทำอย่างอื่น