Wie übergebe ich Requisiten in React effektiv an „this.props.children'?

Wie werden Requisiten an {this.props.children übergeben?🎜>

Mit dieser Frage soll klargestellt werden, wie Requisiten ordnungsgemäß an alle Kinder innerhalb eines Wrappers weitergegeben werden Komponente, die {this.props.children} zum Rendern verwendet.

Klonen von Kindern mit neuen Requisiten

Ein Ansatz beinhaltet die Verwendung von React.Children, das jedes untergeordnete Element durchläuft und es mit neuen Requisiten über React.cloneElement klont. Von dieser Methode wird jedoch im Allgemeinen abgeraten, da sie zu fragilem Code führen kann.

Betrachten Sie zur Veranschaulichung den folgenden Code:

const Child = ({ childName, sayHello }) => (
  <button onClick={() => sayHello(childName)}>{childName}</button>
);

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, child => {
    // `React.isValidElement` ensures the child is a valid React element.
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

  return <div>{childrenWithProps}</div>;
}

Während dieser Ansatz die Weitergabe von Requisiten an Kinder ermöglicht, es ist weniger typsicher und möglicherweise verwirrend zu lesen im Vergleich zur folgenden Alternative:

function Parent({ children }) {
  // This `sayHello` function is passed down to child elements.
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  // Directly passing props to children.
  return <div>{children(sayHello)}</div>;
}

Dieser letztere Ansatz vermittelt expliziter die Absicht, Requisiten weiterzugeben für Kinder und gewährleistet die Typensicherheit.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten in React effektiv an „this.props.children'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!