In React werden Requisiten (Attribute) verwendet, um Daten zwischen Komponenten zu übergeben

In React werden Requisiten (Attribute) verwendet, um Daten zwischen Komponenten zu übergeben. Auf diese Weise können übergeordnete Komponenten Informationen an untergeordnete Komponenten weitergeben. Über Requisiten können übergeordnete Komponenten Daten, Rückruffunktionen, Konfigurationselemente usw. an untergeordnete Komponenten übergeben.

Hinweis: Requisiten sind schreibgeschützt. Ihr Wert wird bestimmt, wenn die übergeordnete Komponente an die untergeordnete Komponente übergeben wird, und kann in der untergeordneten Komponente nicht direkt geändert werden. Wenn die untergeordnete Komponente diese Werte ändern muss, sollten die zu ändernden Daten über eine Rückruffunktion usw. an die übergeordnete Komponente übergeben werden, und die übergeordnete Komponente aktualisiert den relevanten Status.

Grundlegende Verwendung:

// 一个组件
// 通过函数参数来接收 props（）
const Module = (props) => {
    
    
   console.log(props);

  // 注意 prpos 是只读的对象，直接操作会报错
  // props.size = 30;

  return (
    <div>
      <p>组件</p>
      {
    
    /* <img src={props.imgUrl} width={props.size} alt="" /> */}
      <img src={
    
    imgUrl} width={
    
    size} alt="" />
    </div>
  );
};

Komponenten verwenden:

Übergeben Sie Requisiten an die Komponente (Hinweis: Wenn Sie Nicht-String-Daten an die Komponente übergeben möchten, verwenden Sie {}, um sie zu übergeben.)

//  react 中的 props 的使用
const App = () => {
    
    
  return (
    <div>
      <p>使用</p>
      <Module
        size={
    
    200}
        imgUrl="https://p3-passport.byteimg.com/img/user-avatar/732186508929940c0ea6978021bc9f76~100x100.awebp"
      ></Module>
    </div>
  );
};

export default App;

Vereinfachen Sie die Verwendung durch Dekonstruktion, und Sie können hier auch Anfangswerte ​​vergeben

const Module = ({
     
      imgUrl, size = 50 }) => {
    
    

  return (
    <div>
      <p>组件</p>
      <img src={
    
    imgUrl} width={
    
    size} alt="" />
    </div>
  );
};

Erklären Sie den Code vollständig

// 一个组件
// 通过函数参数来接收 props（）
// const Module = (props) => {
    
    

// 通过解构简化，可以再此处赋初始值
const Module = ({
     
      imgUrl, size = 50 }) => {
    
    
  // console.log(props);

  // 注意 prpos 是只读的对象，直接操作会报错
  // props.size = 30;

  return (
    <div>
      <p>组件</p>
      {
    
    /* <img src={props.imgUrl} width={props.size} alt="" /> */}
      <img src={
    
    imgUrl} width={
    
    size} alt="" />
    </div>
  );
};

//  react 中的 props 的使用
const App = () => {
    
    
  return (
    <div>
      <p>123</p>
      {
    
    /* 给组件传递 props（注意：如果要给组件传递非字符串类型的数据，要使用 {} 来传递） */}
      <Module
        size={
    
    200}
        imgUrl="https://p3-passport.byteimg.com/img/user-avatar/732186508929940c0ea6978021bc9f76~100x100.awebp"
      ></Module>
    </div>
  );
};

export default App;