Wie kann ich in React Requisiten an untergeordnete Komponenten übergeben?

Übergabe von Requisiten an {this.props.children}

Beim Definieren generischer Komponenten, die untergeordnete Elemente akzeptieren, ist es notwendig, bestimmte Eigenschaften an alle diese untergeordneten Komponenten weiterzugeben . Im React-Komponentenparadigma wird dies durch die Verwendung von {this.props.children} erreicht. Es stellt sich jedoch die Frage: Wie geben Sie diese Eigenschaften weiter?

Untergeordnete Elemente mit neuen Requisiten klonen

React.Children bietet ein Dienstprogramm zum Durchlaufen und Klonen untergeordneter Elemente, sodass Sie geänderte Elemente erstellen können Versionen mit neuen Requisiten:

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

function Parent({ children }) {
  function sayHello(childName) {
    console.log(`Hello from ${childName} the child`);
  }

  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { sayHello });
    }
    return child;
  });

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

Hinweis: Es wird im Allgemeinen nicht empfohlen, den cloneElement-Ansatz zu verwenden aufgrund seiner potenziellen Fragilität und potenziellen Typsicherheitsprobleme.

Das obige ist der detaillierte Inhalt vonWie kann ich in React Requisiten an untergeordnete Komponenten übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!