Як передавати реквізит {this.props.children}

Я намагаюся знайти правильний спосіб визначити деякі компоненти, які можна було б використовувати загальним чином:

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

Існує логіка для візуалізації між батьківськими та дочірніми компонентами, звичайно, ви можете уявити <select>і <option>як приклад цієї логіки.

Це фіктивна реалізація з метою питання:

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

Питання полягає в тому, що, коли ви використовуєте {this.props.children}для визначення компонента обгортки, як ви передаєте якусь властивість усім її дітям?

Клонування дітей новими реквізитами

Ви можете використовувати React.Children для ітерації над дітьми, а потім клонувати кожен елемент новими реквізитами (неглибоко зрощеними) за допомогою React.cloneElement, наприклад:

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

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

Виклик дітей як функції

Ви також можете передавати реквізит дітям, які мають реквізит . У такому підході діти (яка може бути childrenбудь-яким іншим опорним іменем) - це функція, яка може приймати будь-які аргументи, які ви хочете передавати, і повертає дітей:

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

Замість <React.Fragment>або просто <>ви також можете повернути масив, якщо вам зручніше.

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

Для трохи більш чистого способу це зробити:

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

Редагувати: використовувати з декількома окремими дітьми (дитина сама повинна бути складовою), яку ви можете зробити. Випробувано в 16.8.6

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

Спробуйте це

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

Це працювало для мене, використовуючи реакцію-15.1.

Передайте реквізити, щоб направити дітей.

Дивіться всі інші відповіді

Передайте спільні глобальні дані через дерево компонентів через контекст

Контекст призначений для обміну даними, які можна вважати "глобальними" для дерева компонентів React, таких як поточний аутентифікований користувач, тема або бажана мова. ¹

Відмова: Це оновлена ​​відповідь, попередня використовувала старий контекстний API

Він заснований на принципі споживача / надання. Спочатку створіть свій контекст

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

Потім використовуйте через

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

і

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

Усі Споживачі, які є нащадками Постачальника, повторно надаватимуть кожного разу, коли значення Постачальника зміниться. Поширення від Постачальника до його нащадків Споживачам не підлягає методу shouldComponentUpdate, тому Споживач оновлюється, навіть коли компонент предка не виходить із оновлення. ¹

Повний приклад, напівпсевдокод.

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

Передача реквізиту вкладеним дітям

З оновленням до React 16.6 тепер ви можете використовувати React.createContext і contextType .

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 не міг обробити вкладені компоненти

class SomeComponent extends React.Component {

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

Ви можете використовувати React.cloneElement, краще знати, як це працює, перш ніж почати використовувати його у своїй програмі. Він представлений React v0.13, читайте далі для отримання додаткової інформації, тож щось разом із цією роботою для вас:

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

Тому принесіть рядки з документації React, щоб зрозуміти, як це все працює і як ви можете ними скористатися:

У React v0.13 RC2 ми представимо новий API, схожий на React.addons.cloneWithProps, з таким підписом:

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

На відміну від cloneWithProps, ця нова функція не має ніякої магічної вбудованої поведінки для злиття стилю та className з тієї ж причини, що у нас немає цієї функції від transferPropsTo. Ніхто не впевнений, що саме являє собою повний перелік магічних речей, що ускладнює міркування про код і важке повторне використання, коли стиль має інший підпис (наприклад, у майбутньому React Native).

React.cloneElement майже еквівалентний:

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

Однак, на відміну від JSX та cloneWithProps, він також зберігає посилання. Це означає, що якщо ви отримаєте дитину зі списком, ви її випадково не вкрадете у свого предка. Ви отримаєте ту саму посилання, яка додається до вашого нового елемента.

Один поширений зразок - скласти карту своїх дітей та додати нову опору. Було повідомлено про багато проблем про те, що cloneWithProps втрачає посилання, що ускладнює міркування про ваш код. Тепер дотримуючись тієї ж схеми з cloneElement буде працювати, як очікувалося. Наприклад:

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

Примітка: React.cloneElement (дочірня, {ref: 'newRef'}) НЕ переосмислює реф.

Це було важливою особливістю потрапити в React 0.13, оскільки реквізит незмінний. Шлях до оновлення часто клонує елемент, але тим самим ви можете втратити посилання. Тому тут нам знадобився приємніший шлях оновлення. Під час оновлення викликів у Facebook ми зрозуміли, що нам потрібен цей метод. Ми отримали такі ж відгуки від громади. Тому ми вирішили зробити ще один RC перед остаточним випуском, щоб переконатися, що ми це отримаємо.

Ми плануємо врешті-решт знищити React.addons.cloneWithProps. Ми цього ще не робимо, але це хороша можливість почати думати про власні використання та розглянути можливість використання React.cloneElement. Ми обов’язково доставлятимемо випуск із повідомленнями про депресію, перш ніж ми його фактично видалимо, тому негайних дій не потрібно.

докладніше тут ...

Найкращий спосіб, який дозволяє здійснити передачу власності - це childrenяк функція

Приклад:

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

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

Мені потрібно було виправити прийняту відповідь вище, щоб вона працювала з використанням цього замість цього вказівника. Ця функція в рамках функції карти не визначала функцію doSomething .

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

Оновлення: це виправлення призначено для ECMAScript 5, в ES6 немає необхідності в var що = це

Чистіший спосіб розгляду одного або декількох дітей

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

Жодна з відповідей не стосується питання наявності дітей, які НЕ реагують компонентами, такими як текстові рядки. Обхід може бути приблизно таким:

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

}

Вам більше не потрібно {this.props.children}. Тепер ви можете обернути дитина компоненти , використовуючи renderв Routeі передати свій реквізит , як зазвичай:

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

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

див. приклад тут: https://plnkr.co/edit/jJHQECrKRrtKlKYRpIWl?p=preview

Можливо, ви також можете знайти корисну цю функцію, хоча багато людей розглядали це як анти-шаблон, але він все-таки може бути використаний, якщо ви знаєте, що робите, і добре розробляєте рішення.

Функція як дочірні компоненти

Якщо у вас є кілька дітей, яким ви хочете передати реквізит , ви можете це зробити так, використовуючи React.Children.map:

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

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

Якщо ваш компонент має лише одну дитину, картографування не потрібно, ви можете просто клонуватиElement відразу:

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

Відповідно до документації о cloneElement()

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

Клонуйте і поверніть новий елемент React, використовуючи елемент як вихідну точку. Отриманий елемент матиме реквізити оригінального елемента з новими реквізитами, об'єднаними неглибоко. Нові діти замінять існуючих дітей. ключ та ref від початкового елемента будуть збережені.

React.cloneElement() майже еквівалентний:

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

Однак він також зберігає реф. Це означає, що якщо ви отримаєте дитину зі списком, ви її випадково не вкрадете у свого предка. Ви отримаєте ту саму посилання, яка додається до вашого нового елемента.

Отже, cloneElement - це те, що ви використовували б для надання дітям реквізиту. Однак у компоненті може бути декілька дітей, і вам потрібно буде перевернути його. Інші відповіді пропонують вам скласти карту, використовуючи їх React.Children.map. Однак на React.Children.mapвідміну від React.cloneElementзмін, клавіші Елемента додаються та додаються .$як префікс. Перегляньте це питання для більш детальної інформації: React.cloneElement всередині React.Children.map викликає зміну ключів елементів

Якщо ви хочете цього уникнути, вам слід скористатися такою forEachфункцією

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

}

Далі до відповіді @and_rest, я клоную дітей та додаю клас.

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

Я думаю, що рендеринг - це відповідний спосіб впоратися з цим сценарієм

Ви дозволяєте Батькові надати необхідні реквізити, що використовуються в дочірніх компонентах, переробляючи на батьківський код, щоб виглядати приблизно так:

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

  return children({ doSomething })
}

Потім у дочірньому компоненті ви можете отримати доступ до функції, наданої батьком таким чином:

class Child extends React {

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

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

}

Тепер наречена структура буде виглядати так:

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

Спосіб 1 - клонувати дітей

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

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

Спосіб 2 - використання композиційного контексту

Контекст дозволяє передавати опору глибокому дочірньому компоненту без явного передачі його як опори через компоненти між ними.

Контекст має недоліки:

1. Дані не надходять регулярно - через реквізит.
2. Використання контексту створює договір між споживачем та постачальником. Можливо, буде складніше зрозуміти та повторити вимоги, необхідні для повторного використання компонента.

Використання композиційного контексту

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

Найкруткіший спосіб зробити це:

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

Для кожного, у кого є єдиний дочірній елемент, це слід зробити.

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

Це те, що вам потрібно?

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 не працював на мене. Це те, що працювало для мене.

Я хотів просто додати клас дитині. подібно до зміни опори

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

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

Хитрість тут - React.cloneElement . Ви можете передавати будь-яку опору аналогічним чином

Надання реквізиту є найбільш точним підходом до цієї проблеми. Замість того, щоб передавати дочірній компонент батьківському компоненту як дочірній реквізит, дозвольте батькові відображати дочірній компонент вручну. Render - це вбудований реквізит у реакції, який приймає параметр функції. За допомогою цієї функції ви можете дозволити батьківському компоненту відображати все, що завгодно, із спеціальними параметрами. В основному це робить те ж саме, що і дитячий реквізит, але це більш настроюється.

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

Використовуючи функціональні компоненти, ви часто будете отримувати TypeError: Cannot add property myNewProp, object is not extensibleпомилку, намагаючись увімкнути нові властивості props.children. Для цього існує робота над клонуванням реквізиту, а потім клонуванням самої дитини новим реквізитом.

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