Wie man Requisiten an {this.props.children} weitergibt

Ich versuche, den richtigen Weg zu finden, um einige Komponenten zu definieren, die generisch verwendet werden könnten:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

Es gibt eine Logik für die Darstellung zwischen Eltern und Kindern Komponenten natürlich geht, können Sie sich vorstellen , <select>und <option>als ein Beispiel dieser Logik.

Dies ist eine Dummy-Implementierung für den Zweck der Frage:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

Die Frage ist, wann immer Sie {this.props.children}eine Wrapper-Komponente definieren, wie Sie eine Eigenschaft an alle untergeordneten Elemente weitergeben.

Kinder mit neuen Requisiten klonen

Sie können React.Children verwenden , um die untergeordneten Elemente zu durchlaufen , und dann jedes Element mit neuen Requisiten (flach zusammengeführt) mit React.cloneElement klonen, z.

import React, { Children, isValidElement, cloneElement } from 'react';

const Child = ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}>Click Me</div>
);

function Parent({ children }) {
  function doSomething(value) {
    console.log('doSomething called by child with value:', value);
  }

  render() {
    const childrenWithProps = Children.map(children, child => {
      // Checking isValidElement is the safe way and avoids a TS error too.
      if (isValidElement(child)) {
        return cloneElement(child, { doSomething })
      }

      return child;
    });

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

ReactDOM.render(
  <Parent>
    <Child value="1" />
    <Child value="2" />
  </Parent>,
  document.getElementById('container')
);

Geige: https://jsfiddle.net/2q294y43/2/

Kinder als Funktion anrufen

Sie können Requisiten auch an Kinder mit Render-Requisiten übergeben . Bei diesem Ansatz sind die childrenuntergeordneten Elemente (die ein beliebiger Requisitenname sein können) eine Funktion, die alle Argumente akzeptieren kann, die Sie übergeben möchten, und die untergeordneten Elemente zurückgibt:

const Child = ({ doSomething, value }) => (
  <div onClick={() =>  doSomething(value)}>Click Me</div>
);

function Parent({ children }) {
  function doSomething(value) {
    console.log('doSomething called by child with value:', value);
  }

  render() {
    // Note that children is called as a function and we can pass args to it
    return <div>{children(doSomething)}</div>
  }
};

ReactDOM.render(
  <Parent>
    {doSomething => (
      <React.Fragment>
        <Child doSomething={doSomething} value="1" />
        <Child doSomething={doSomething} value="2" />
      </React.Fragment>
    )}
  </Parent>,
  document.getElementById('container')
);

Anstelle von <React.Fragment>oder einfach können <>Sie auch ein Array zurückgeben, wenn Sie dies bevorzugen.

Geige: https://jsfiddle.net/ferahl/y5pcua68/7/

Versuchen Sie für eine etwas sauberere Vorgehensweise:

<div>
    {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>

Bearbeiten: Zur Verwendung mit mehreren einzelnen Kindern (das Kind muss selbst eine Komponente sein) können Sie dies tun. Getestet in 16.8.6

<div>
    {React.cloneElement(props.children[0], { loggedIn: true, testingTwo: true })}
    {React.cloneElement(props.children[1], { loggedIn: true, testProp: false })}
</div>

Versuche dies

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

Es hat bei mir mit react-15.1 funktioniert.

Requisiten an direkte Kinder weitergeben.

Alle anderen Antworten anzeigen

Übergeben Sie gemeinsam genutzte globale Daten über den Kontext durch den Komponentenbaum

Der Kontext dient zum Teilen von Daten, die für einen Baum von React-Komponenten als "global" betrachtet werden können, z. B. der aktuell authentifizierte Benutzer, das Thema oder die bevorzugte Sprache. ¹

Haftungsausschluss: Dies ist eine aktualisierte Antwort. Die vorherige Antwort verwendete die alte Kontext-API

Es basiert auf dem Consumer / Provide-Prinzip. Erstellen Sie zunächst Ihren Kontext

const { Provider, Consumer } = React.createContext(defaultValue);

Dann benutze via

<Provider value={/* some value */}>
  {children} /* potential consumers */
<Provider />

und

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

Alle Verbraucher, die Nachkommen eines Anbieters sind, werden erneut gerendert, wenn sich die Wertstütze des Anbieters ändert. Die Weitergabe von Provider an seine Nachkommen Consumers unterliegt nicht der shouldComponentUpdate-Methode, sodass der Consumer auch dann aktualisiert wird, wenn eine Vorgängerkomponente aus dem Update ausscheidet. ¹

Vollständiges Beispiel, Semi-Pseudo-Code.

import React from 'react';

const { Provider, Consumer } = React.createContext({ color: 'white' });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: { color: 'black' },
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

class Toolbar extends React.Component {
  render() {
    return ( 
      <div>
        <p> Consumer can be arbitrary levels deep </p>
        <Consumer> 
          {value => <p> The toolbar will be in color {value.color} </p>}
        </Consumer>
      </div>
    );
  }
}

¹ https://facebook.github.io/react/docs/context.html

Requisiten an verschachtelte Kinder weitergeben

Mit dem Update auf React 16.6 können Sie jetzt React.createContext und contextType verwenden .

import * as React from 'react';

// React.createContext accepts a defaultValue as the first param
const MyContext = React.createContext(); 

class Parent extends React.Component {
  doSomething = (value) => {
    // Do something here with value
  };

  render() {
    return (
       <MyContext.Provider value={{ doSomething: this.doSomething }}>
         {this.props.children}
       </MyContext.Provider>
    );
  }
}

class Child extends React.Component {
  static contextType = MyContext;

  onClick = () => {
    this.context.doSomething(this.props.value);
  };      

  render() {
    return (
      <div onClick={this.onClick}>{this.props.value}</div>
    );
  }
}


// Example of using Parent and Child

import * as React from 'react';

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <Child value={2} />
      </Parent>
    );
  }
}

React.createContext leuchtet dort, wo der Fall React.cloneElement verschachtelte Komponenten nicht verarbeiten konnte

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <SomeOtherComp><Child value={2} /></SomeOtherComp>
      </Parent>
    );
  }
}

Sie können verwenden React.cloneElement, es ist besser zu wissen, wie es funktioniert, bevor Sie es in Ihrer Anwendung verwenden. Es wird in eingeführt React v0.13, lesen Sie weiter für weitere Informationen, also etwas zusammen mit dieser Arbeit für Sie:

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

Bringen Sie also die Zeilen aus der React-Dokumentation mit, damit Sie verstehen, wie alles funktioniert und wie Sie sie verwenden können:

In React v0.13 RC2 werden wir eine neue API einführen, ähnlich wie React.addons.cloneWithProps, mit dieser Signatur:

React.cloneElement(element, props, ...children);

Im Gegensatz zu cloneWithProps verfügt diese neue Funktion über kein integriertes magisches Verhalten zum Zusammenführen von Stil und Klassenname, aus dem gleichen Grund, aus dem wir diese Funktion von transferPropsTo nicht haben. Niemand ist sich sicher, was genau die vollständige Liste der magischen Dinge ist, was es schwierig macht, über den Code nachzudenken und ihn wiederzuverwenden, wenn der Stil eine andere Signatur hat (z. B. im kommenden React Native).

React.cloneElement entspricht fast:

<element.type {...element.props} {...props}>{children}</element.type>

Im Gegensatz zu JSX und cloneWithProps werden jedoch auch refs beibehalten. Das heißt, wenn Sie ein Kind mit einem Schiedsrichter haben, werden Sie es nicht versehentlich Ihrem Vorfahren stehlen. Sie erhalten den gleichen Verweis an Ihr neues Element.

Ein häufiges Muster besteht darin, Ihre Kinder abzubilden und eine neue Requisite hinzuzufügen. Es wurden viele Probleme gemeldet, bei denen cloneWithProps den Ref verloren hat, was es schwieriger macht, über Ihren Code nachzudenken. Wenn Sie nun mit cloneElement dem gleichen Muster folgen, funktioniert dies wie erwartet. Zum Beispiel:

var newChildren = React.Children.map(this.props.children, function(child) {
  return React.cloneElement(child, { foo: true })
});

Hinweis: React.cloneElement (child, {ref: 'newRef'}) überschreibt den Ref, sodass zwei Eltern immer noch keinen Ref für dasselbe Kind haben können, es sei denn, Sie verwenden Callback-Refs.

Dies war eine wichtige Funktion für React 0.13, da Requisiten jetzt unveränderlich sind. Der Upgrade-Pfad besteht häufig darin, das Element zu klonen. Andernfalls verlieren Sie möglicherweise die Referenz. Deshalb brauchten wir hier einen schöneren Upgrade-Pfad. Als wir Callsites bei Facebook aktualisierten, stellten wir fest, dass wir diese Methode brauchten. Wir haben das gleiche Feedback von der Community erhalten. Aus diesem Grund haben wir uns entschlossen, vor der endgültigen Veröffentlichung einen weiteren RC zu erstellen, um sicherzustellen, dass wir diesen erhalten.

Wir planen, React.addons.cloneWithProps irgendwann zu verwerfen. Wir tun es noch nicht, aber dies ist eine gute Gelegenheit, über Ihre eigenen Verwendungszwecke nachzudenken und stattdessen React.cloneElement zu verwenden. Wir werden sicher sein, eine Version mit Verfallsbenachrichtigungen zu versenden, bevor wir sie tatsächlich entfernen, sodass keine sofortigen Maßnahmen erforderlich sind.

mehr hier ...

Der beste Weg, um Eigentum zu übertragen, ist childrenwie eine Funktion

Beispiel:

export const GrantParent = () => {
  return (
    <Parent>
      {props => (
        <ChildComponent {...props}>
          Bla-bla-bla
        </ChildComponent>
      )}
    </Parent>
  )
}

export const Parent = ({ children }) => {
    const somePropsHere = { //...any }
    <>
        {children(somePropsHere)}
    </>
}

Ich musste die oben akzeptierte Antwort korrigieren, damit sie mit dieser anstelle dieses Zeigers funktioniert . Für diese Funktion wurde im Rahmen der Kartenfunktion die Funktion doSomething nicht definiert.

var Parent = React.createClass({
doSomething: function() {
    console.log('doSomething!');
},

render: function() {
    var that = this;
    var childrenWithProps = React.Children.map(this.props.children, function(child) {
        return React.cloneElement(child, { doSomething: that.doSomething });
    });

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

Update: Dieser Fix ist für ECMAScript 5, in ES6 ist var that = this nicht erforderlich

Sauberer Weg, wenn man ein oder mehrere Kinder berücksichtigt

<div>
   { React.Children.map(this.props.children, child => React.cloneElement(child, {...this.props}))}
</div>

Keine der Antworten befasst sich mit dem Problem, Kinder zu haben, die KEINE Reaktionskomponenten sind, wie z. B. Textzeichenfolgen. Eine Problemumgehung könnte ungefähr so ​​aussehen:

// Render method of Parent component
render(){
    let props = {
        setAlert : () => {alert("It works")}
    };
    let childrenWithProps = React.Children.map( this.props.children, function(child) {
        if (React.isValidElement(child)){
            return React.cloneElement(child, props);
        }
          return child;
      });
    return <div>{childrenWithProps}</div>

}

Du brauchst nicht mehr {this.props.children}. Jetzt können Sie Ihre untergeordnete Komponente mit renderin einwickeln Routeund Ihre Requisiten wie gewohnt weitergeben:

<BrowserRouter>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/posts">Posts</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>

    <hr/>

    <Route path="/" exact component={Home} />
    <Route path="/posts" render={() => (
      <Posts
        value1={1}
        value2={2}
        data={this.state.data}
      />
    )} />
    <Route path="/about" component={About} />
  </div>
</BrowserRouter>

Parent.jsx:

import React from 'react';

const doSomething = value => {};

const Parent = props => (
  <div>
    {
      !props || !props.children 
        ? <div>Loading... (required at least one child)</div>
        : !props.children.length 
            ? <props.children.type {...props.children.props} doSomething={doSomething} {...props}>{props.children}</props.children.type>
            : props.children.map((child, key) => 
              React.cloneElement(child, {...props, key, doSomething}))
    }
  </div>
);

Child.jsx:

import React from 'react';

/* but better import doSomething right here,
   or use some flux store (for example redux library) */
export default ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}/>
);

und main.jsx:

import React from 'react';
import { render } from 'react-dom';
import Parent from './Parent';
import Child from './Child';

render(
  <Parent>
    <Child/>
    <Child value='1'/>
    <Child value='2'/>
  </Parent>,
  document.getElementById('...')
);

Siehe Beispiel hier: https://plnkr.co/edit/jJHQECrKRrtKlKYRpIWl?p=preview

Vielleicht finden Sie diese Funktion auch nützlich, obwohl viele Leute dies als Anti-Pattern angesehen haben. Sie kann dennoch verwendet werden, wenn Sie wissen, was Sie tun, und Ihre Lösung gut entwerfen.

Funktion als untergeordnete Komponenten

Wenn Sie mehrere Kinder haben, an die Sie Requisiten übergeben möchten , können Sie dies auf folgende Weise mithilfe der React.Children.map tun:

render() {
    let updatedChildren = React.Children.map(this.props.children,
        (child) => {
            return React.cloneElement(child, { newProp: newProp });
        });

    return (
        <div>
            { updatedChildren }
        </div>
    );
}

Wenn Ihre Komponente nur ein untergeordnetes Element hat, ist keine Zuordnung erforderlich. Sie können Element einfach sofort klonen:

render() {
    return (
        <div>
            {
                React.cloneElement(this.props.children, {
                    newProp: newProp
                })
            }
        </div>
    );
}

Nach der Dokumentation von cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

Klonen Sie ein neues React-Element und geben Sie es mit dem Element als Ausgangspunkt zurück. Das resultierende Element enthält die Requisiten des ursprünglichen Elements, wobei die neuen Requisiten flach zusammengeführt werden. Neue Kinder werden bestehende Kinder ersetzen. Schlüssel und Referenz des ursprünglichen Elements bleiben erhalten.

React.cloneElement() ist fast gleichbedeutend mit:

<element.type {...element.props} {...props}>{children}</element.type>

Es bewahrt jedoch auch refs. Das heißt, wenn Sie ein Kind mit einem Schiedsrichter haben, werden Sie es nicht versehentlich Ihrem Vorfahren stehlen. Sie erhalten den gleichen Verweis an Ihr neues Element.

CloneElement ist also das, was Sie verwenden würden, um den Kindern benutzerdefinierte Requisiten bereitzustellen. Die Komponente kann jedoch mehrere untergeordnete Elemente enthalten, die Sie durchlaufen müssen. Andere Antworten schlagen vor, dass Sie sie mit abbilden React.Children.map. Im React.Children.mapGegensatz zu React.cloneElementÄnderungen werden jedoch die Schlüssel des Elements angehängt und .$als Präfix hinzugefügt. Überprüfen Sie diese Frage auf weitere Details: React.cloneElement in React.Children.map bewirkt, dass sich Elementschlüssel ändern

Wenn Sie es vermeiden möchten, sollten Sie stattdessen die forEachFunktion wie wählen

render() {
    const newElements = [];
    React.Children.forEach(this.props.children, 
              child => newElements.push(
                 React.cloneElement(
                   child, 
                   {...this.props, ...customProps}
                )
              )
    )
    return (
        <div>{newElements}</div>
    )

}

Nach der Antwort von @and_rest klone ich die Kinder auf diese Weise und füge eine Klasse hinzu.

<div className="parent">
    {React.Children.map(this.props.children, child => React.cloneElement(child, {className:'child'}))}
</div>

Ich denke, eine Render-Requisite ist der geeignete Weg, um mit diesem Szenario umzugehen

Sie lassen den Elternteil die erforderlichen Requisiten bereitstellen, die in der untergeordneten Komponente verwendet werden, indem Sie den übergeordneten Code so umgestalten, dass er wie folgt aussieht:

const Parent = ({children}) => {
  const doSomething(value) => {}

  return children({ doSomething })
}

Dann können Sie in der untergeordneten Komponente auf folgende Weise auf die vom übergeordneten Element bereitgestellte Funktion zugreifen:

class Child extends React {

  onClick() => { this.props.doSomething }

  render() { 
    return (<div onClick={this.onClick}></div>);
  }

}

Jetzt sieht die Verlobungsstruktur folgendermaßen aus:

<Parent>
  {(doSomething) =>
   (<Fragment>
     <Child value="1" doSomething={doSomething}>
     <Child value="2" doSomething={doSomething}>
    <Fragment />
   )}
</Parent>

Methode 1 - Kinder klonen

const Parent = (props) => {
   const attributeToAddOrReplace= "Some Value"
   const childrenWithAdjustedProps = React.Children.map(props.children, child =>
      React.cloneElement(child, { attributeToAddOrReplace})
   );

   return <div>{childrenWithAdjustedProps }</div>
}

Methode 2 - Verwenden Sie einen zusammensetzbaren Kontext

Mit Context können Sie eine Requisite an eine untergeordnete Komponente übergeben, ohne sie explizit als Requisite durch die dazwischen liegenden Komponenten zu übergeben.

Der Kontext hat Nachteile:

1. Daten fließen nicht normal - über Requisiten.
2. Durch die Verwendung des Kontexts wird ein Vertrag zwischen dem Verbraucher und dem Anbieter erstellt. Es ist möglicherweise schwieriger, die Anforderungen für die Wiederverwendung einer Komponente zu verstehen und zu replizieren.

Verwenden eines zusammensetzbaren Kontexts

export const Context = createContext<any>(null);

export const ComposableContext = ({ children, ...otherProps }:{children:ReactNode, [x:string]:any}) => {
    const context = useContext(Context)
    return(
      <Context.Provider {...context} value={{...context, ...otherProps}}>{children}</Context.Provider>
    );
}

function App() {
  return (
      <Provider1>
            <Provider2> 
                <Displayer />
            </Provider2>
      </Provider1>
  );
}

const Provider1 =({children}:{children:ReactNode}) => (
    <ComposableContext greeting="Hello">{children}</ComposableContext>
)

const Provider2 =({children}:{children:ReactNode}) => (
    <ComposableContext name="world">{children}</ComposableContext>
)

const Displayer = () => {
  const context = useContext(Context);
  return <div>{context.greeting}, {context.name}</div>;
};

Der einfachste Weg, dies zu tun:

    {React.cloneElement(this.props.children, this.props)}

Für jeden, der ein einzelnes untergeordnetes Element hat, sollte dies der Fall sein.

{React.isValidElement(this.props.children)
                  ? React.cloneElement(this.props.children, {
                      ...prop_you_want_to_pass
                    })
                  : null}

Ist es das, was Sie benötigt haben?

var Parent = React.createClass({
  doSomething: function(value) {
  }
  render: function() {
    return  <div>
              <Child doSome={this.doSomething} />
            </div>
  }
})

var Child = React.createClass({
  onClick:function() {
    this.props.doSome(value); // doSomething is undefined
  },  
  render: function() {
    return  <div onClick={this.onClick}></div>
  }
})

Aus irgendeinem Grund hat React.children nicht für mich gearbeitet. Das hat bei mir funktioniert.

Ich wollte dem Kind nur eine Klasse hinzufügen. ähnlich wie beim Wechseln einer Requisite

 var newChildren = this.props.children.map((child) => {
 const className = "MenuTooltip-item " + child.props.className;
    return React.cloneElement(child, { className });
 });

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

Der Trick hier ist das React.cloneElement . Sie können jede Requisite auf ähnliche Weise übergeben

Render Requisiten ist der genaueste Ansatz für dieses Problem. Anstatt die untergeordnete Komponente als untergeordnete Requisiten an die übergeordnete Komponente zu übergeben, lassen Sie die untergeordnete Komponente manuell übergeordnete Komponente rendern. Render ist eingebaute Requisiten in reagieren, die Funktionsparameter nehmen. In dieser Funktion können Sie die übergeordnete Komponente mit benutzerdefinierten Parametern beliebig rendern lassen. Grundsätzlich funktioniert es genauso wie Kinderrequisiten, ist jedoch anpassbarer.

class Child extends React.Component {
  render() {
    return <div className="Child">
      Child
      <p onClick={this.props.doSomething}>Click me</p>
           {this.props.a}
    </div>;
  }
}

class Parent extends React.Component {
  doSomething(){
   alert("Parent talks"); 
  }

  render() {
    return <div className="Parent">
      Parent
      {this.props.render({
        anythingToPassChildren:1, 
        doSomething: this.doSomething})}
    </div>;
  }
}

class Application extends React.Component {
  render() {
    return <div>
      <Parent render={
          props => <Child {...props} />
        }/>
    </div>;
  }
}

Beispiel bei Codepen

Bei Verwendung von Funktionskomponenten wird häufig der TypeError: Cannot add property myNewProp, object is not extensibleFehler angezeigt, wenn Sie versuchen, neue Eigenschaften festzulegen props.children. Dies wird umgangen, indem die Requisiten geklont und dann das Kind selbst mit den neuen Requisiten geklont werden.

const MyParentComponent = (props) => {
  return (
    <div className='whatever'>
      {props.children.map((child) => {
        const newProps = { ...child.props }
        // set new props here on newProps
        newProps.myNewProp = 'something'
        const preparedChild = { ...child, props: newProps }
        return preparedChild
      })}
    </div>
  )
}