Destekleri {this.props.children} adresine nasıl geçirebilirim?

Genel bir şekilde kullanılabilecek bazı bileşenleri tanımlamak için uygun bir yol bulmaya çalışıyorum:

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

Tabii ki ebeveyn ve çocuk bileşenleri arasında renderleme için bir mantık var, hayal edebilirsiniz <select>ve <option>bu mantığın bir örneği.

Bu, sorunun amacı için kukla bir uygulamadır:

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>);
  }
});

Soru, {this.props.children}bir sarıcı bileşen tanımlamak için her kullandığınızda , bazı özellikleri tüm alt öğelerine nasıl iletirsiniz?

Çocukları yeni sahne ile klonlama

Çocukları yinelemek için React.Children'i kullanabilir ve ardından React.cloneElement örn.

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')
);

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

Çocukları işlev olarak adlandırmak

Ayrıca, render sahne olan çocuklara da sahne geçebilirsiniz . Bu yaklaşımda çocuklar ( childrenveya başka bir pervane adı olabilir) geçmek istediğiniz argümanları kabul edebilen ve çocukları döndüren bir işlevdir:

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')
);

İsterseniz <React.Fragment>veya yerine basitçe <>bir dizi döndürebilirsiniz.

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

Bunu yapmanın biraz daha temiz bir yolu için şunu deneyin:

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

Düzenleme: Birden fazla çocukla kullanmak için (çocuğun kendisi bir bileşen olmalıdır) yapabilirsiniz. 16.8.6'da test edildi

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

Bunu dene

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

Reaksiyon-15.1 kullanarak benim için çalıştı.

Çocukları yönlendirmek için sahne geçmek.

Diğer tüm cevapları görün

Paylaşılan, global verileri içerik ağacından içerik yoluyla geçirin

Bağlam, geçerli kimliği doğrulanmış kullanıcı, tema veya tercih edilen dil gibi bir React bileşenleri ağacı için "genel" olarak kabul edilebilecek verileri paylaşmak için tasarlanmıştır. ¹

Feragatname: Bu güncellenmiş bir cevaptır, önceki yanıt eski bağlam API'sını kullanmıştır

Tüketici / Tedarik ilkesine dayanmaktadır. İlk olarak, bağlamınızı oluşturun

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

Sonra üzerinden kullanın

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

ve

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

Bir Sağlayıcının torunları olan tüm Tüketiciler, Sağlayıcının değer desteği her değiştiğinde yeniden oluşturulur. Sağlayıcının neslinden gelen Tüketicilere yayılması shouldComponentUpdate yöntemine tabi değildir, bu nedenle bir üst bileşen güncellemeden çıksa bile Tüketici güncellenir. ¹

Tam örnek, yarı sahte kod.

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

İç İçe Çocuklara Sahne Geçişi

React 16.6 güncellemesi ile artık React.createContext ve contextType kullanabilirsiniz .

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 , React.cloneElement örneğinin iç içe bileşenleri işleyemediği yerlerde parlıyor

class SomeComponent extends React.Component {

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

Bunu kullanabilirsiniz React.cloneElement, uygulamanızda kullanmaya başlamadan önce nasıl çalıştığını bilmek daha iyidir. Sunuldu React v0.13, daha fazla bilgi için okumaya devam edin, bu yüzden sizin için bu çalışma ile birlikte bir şey:

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

Tüm bunların nasıl çalıştığını ve bunlardan nasıl yararlanabileceğinizi anlamak için React belgelerindeki satırları getirin:

React v0.13 RC2'de, bu imza ile React.addons.cloneWithProps'a benzer yeni bir API tanıtacağız:

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

CloneWithProps'ın aksine, bu yeni işlev stil ve className'i birleştirmek için herhangi bir sihirli yerleşik davranışa sahip değildir, aynı nedenle transferPropsTo'dan bu özelliğe sahip değiliz. Kimse sihirli şeylerin tam listesinin tam olarak ne olduğundan emin değil, bu da kod hakkında mantık oluşturmayı ve stilin farklı bir imzası olduğunda (örneğin, yaklaşan React Native'da) yeniden kullanılmasını zorlaştırıyor.

React.cloneElement neredeyse şuna eşittir:

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

Ancak, JSX ve cloneWithProps'ın aksine, ref'leri de korur. Bu, üzerinde ref olan bir çocuk alırsanız, yanlışlıkla atadan çalmayacağınız anlamına gelir. Aynı ref'yi yeni öğenize ekleyeceksiniz.

Yaygın bir model, çocuklarınızın haritasını çıkarmak ve yeni bir pervane eklemektir. CloneWithProps ref kaybetme hakkında bildirilen birçok sorun vardı, bu da kodunuz hakkında akıl yürütmeyi zorlaştırıyor. Şimdi cloneElement ile aynı kalıbı takip etmek beklendiği gibi çalışacaktır. Örneğin:

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

Not: React.cloneElement (child, {ref: 'newRef'}) ref'yi geçersiz kılar, bu nedenle geri arama ref'leri kullanmadığınız sürece iki ebeveynin aynı çocuğa ref sahip olması mümkün değildir.

Sahne şimdi değişmez olduğu için React 0.13'e girmek için kritik bir özellikti. Yükseltme yolu genellikle öğeyi klonlamaktır, ancak bunu yaparak ref kaybedebilirsiniz. Bu nedenle, burada daha güzel bir yükseltme yoluna ihtiyacımız vardı. Facebook'ta çağrı sitelerini yeni sürüme geçirirken bu yönteme ihtiyacımız olduğunu fark ettik. Aynı geri bildirimi topluluktan aldık. Bu nedenle, son sürümden önce bunu aldığımızdan emin olmak için başka bir RC yapmaya karar verdik.

Sonunda React.addons.cloneWithProps'ı kullanımdan kaldırmayı planlıyoruz. Henüz yapmıyoruz, ancak bu kendi kullanımlarınızı düşünmeye başlamak ve bunun yerine React.cloneElement kullanmayı düşünmek için iyi bir fırsat. Gerçekten kaldırmadan önce kullanımdan kaldırma bildirimleri içeren bir sürüm göndereceğimizden emin olacağız, bu yüzden acil bir işlem gerekmez.

daha fazlası burada ...

Mülk aktarımı yapmanızı sağlayan en iyi yol childrenbir işlev gibidir

Misal:

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

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

Bunun kullanarak çalışır hale getirmek için yukarıda kabul edilen cevabını düzeltmek için gerekli olduğunu yerine bu pointer. Bu harita fonksiyonu kapsamında doSomething fonksiyonu tanımlanmamıştır.

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>
}})

Güncelleme: bu düzeltme ECMAScript 5 içindir, ES6'da var =

Bir veya daha fazla çocuğu göz önünde bulundurarak daha temiz bir yol

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

Yanıtların hiçbiri, metin dizeleri gibi React bileşeni OLMAYAN çocuklara sahip olma sorununu ele almaz. Geçici çözüm şöyle bir şey olabilir:

// 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>

}

Artık ihtiyacınız yok {this.props.children}. Artık kullanarak çocuğunuzun bileşeni sarabilirsiniz renderiçinde Routeve her zamanki gibi sahne geçmesi:

<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)}/>
);

ve 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('...')
);

buradaki örneğe bakın: https://plnkr.co/edit/jJHQECrKRrtKlKYRpIWl?p=preview

Belki de bu özelliği yararlı bulabilirsiniz, ancak birçok kişi bunu bir anti-desen olarak kabul etmiş olsa da, ne yaptığınızı biliyorsanız ve çözümünüzü iyi tasarlarsanız yine de kullanılabilir.

Alt Bileşenler Olarak İşlev

Sahne geçmek istediğiniz birden fazla çocuğunuz varsa , React.Children.map dosyasını kullanarak bu şekilde yapabilirsiniz:

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

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

Bileşeninizde yalnızca bir çocuk varsa, eşlemeye gerek yoktur, hemen klonlayabilirsiniz.

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

Belgelerine göre cloneElement()

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

Öğeyi başlangıç ​​noktası olarak kullanarak yeni bir React öğesini kopyalayın ve döndürün. Ortaya çıkan eleman, yeni elemanın sığ olarak birleştirildiği orijinal elemanın desteklerine sahip olacaktır. Yeni çocuklar mevcut çocukların yerini alacaktır. orijinal öğedeki anahtar ve ref korunacaktır.

React.cloneElement() neredeyse şuna eşittir:

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

Ancak, ref'leri de korur. Bu, üzerinde ref olan bir çocuk alırsanız, yanlışlıkla atadan çalmayacağınız anlamına gelir. Aynı ref'yi yeni öğenize ekleyeceksiniz.

Bu nedenle, cloneElement, çocuklara özel sahne sağlamak için kullanacağınız şeydir. Ancak bileşende birden fazla çocuk olabilir ve bunun üzerinde döngü yapmanız gerekir. Diğer cevapların önerileri, bunları kullanarak eşlemenizdir React.Children.map. Ancak değişikliklerin React.Children.mapaksine React.cloneElementÖğe'nin anahtarları ek .$ve önek olarak eklenir. Daha fazla ayrıntı için bu soruyu kontrol edin: React.Children.map içindeki React.cloneElement öğe anahtarlarının değişmesine neden oluyor

Bunu önlemek istiyorsanız, bunun yerine gitmek gerekir forEachgibi işlevi

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

}

@Ve_rest cevabına ek olarak, çocukları bu şekilde klonlayıp bir sınıf ekliyorum.

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

Bence bir render pervane bu senaryo için uygun bir yol

Böyle bir şeye bakmak için Ebeveyn kodunu yeniden düzenleyerek Ebeveynin alt bileşende kullanılan gerekli desteği sağlamasına izin verdiniz:

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

  return children({ doSomething })
}

Daha sonra alt Bileşen'de ebeveyn tarafından sağlanan işleve şu şekilde erişebilirsiniz:

class Child extends React {

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

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

}

Şimdi fianl yapısı şöyle görünecek:

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

Yöntem 1 - Klon Çocukları

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

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

Yöntem 2 - Oluşturulabilir Bağlam Kullanın

Bağlam, bir destek parçasını, aradaki bileşenler üzerinden bir destekleyici olarak açıkça geçirmeden derin bir alt bileşene geçirmenize olanak tanır.

Bağlamın dezavantajları vardır:

1. Veriler, düzenli olarak - sahne araçları yoluyla akmıyor.
2. Bağlam kullanmak, tüketici ile sağlayıcı arasında bir sözleşme oluşturur. Bir bileşeni yeniden kullanmak için gereken gereksinimleri anlamak ve çoğaltmak daha zor olabilir.

Bileşilebilir bir bağlam kullanma

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>;
};

Bunu yapmanın en şık yolu:

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

Tek bir alt öğesi olan herhangi biri için bunu yapmalıdır.

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

İstediğin bu mu?

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>
  }
})

React.children'in benim için çalışmamasının bir nedeni. Bu benim için işe yaradı.

Çocuğa sadece bir sınıf eklemek istedim. pervane değiştirmeye benzer

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

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

Buradaki hile React.cloneElement . Herhangi bir pervaneyi benzer şekilde geçirebilirsiniz

Render aksesuvarları bu soruna en doğru yaklaşımdır. Alt bileşen, alt sahne olarak üst bileşene iletmek yerine, üst öğenin alt bileşeni el ile oluşturmasına izin verin. Render , fonksiyon parametresini alan reaksiyonda yerleşik sahne. Bu işlevde, üst bileşenin özel parametrelerle istediğinizi oluşturmasına izin verebilirsiniz. Temelde çocuk sahne ile aynı şeyi yapar, ancak daha özelleştirilebilir.

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>;
  }
}

Codepen'de örnek

İşlevsel bileşenleri kullanırken, TypeError: Cannot add property myNewProp, object is not extensibleyeni özellikleri ayarlamaya çalışırken sıklıkla hata alırsınız props.children. Sahne etrafında klonlama ve sonra yeni sahne ile çocuğun kendisini klonlama etrafında bir çalışma var.

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>
  )
}