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

Клонирование детей с новым реквизитом

Вы можете использовать React.Children для перебора дочерних элементов, а затем клонировать каждый элемент с новым props (неглубокое слияние) с использованием React.cloneElement. Например:

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

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

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

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

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

ReactDOM.render(<App />, document.getElementById("container"));

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="container"></div>

Вызов детей как функция

Кроме того, вы можете передавать реквизиты детям с помощью рендеринга реквизитов. В этом подходе дочерние элементы (которые могут быть children или любым другим именем опоры) - это функция, которая может принимать любые аргументы, которые вы хотите передать, и возвращает дочерние элементы:

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

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

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

function App() {
  // doSomething is the arg we passed in Parent, which
  // we now pass through to Child.
  return (
    <Parent>
      {doSomething => (
        <React.Fragment>
          <Child doSomething={doSomething} value={1} />
          <Child doSomething={doSomething} value={2} />
        </React.Fragment>
      )}
    </Parent>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="container"></div>

Вместо <React.Fragment> или просто <> вы также можете вернуть массив, если хотите.

Чтобы сделать это немного чище, попробуйте:

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

Изменить: для использования с несколькими отдельными дочерними элементами (ребенок сам должен быть компонентом), вы можете это сделать. Проверено в 16.8.6

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

Попробуй это

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

У меня это сработало, используя response-15.1.

Передайте реквизит прямым детям.

Посмотреть все другие ответы

Передача общих глобальных данных через дерево компонентов через context

Контекст предназначен для обмена данными, которые можно считать «глобальными» для дерева компонентов 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>

Все потребители, являющиеся потомками провайдера, будут повторно отображаться при изменении значения свойства провайдера. Распространение от Provider к его потомкам Consumers не подлежит методу shouldComponentUpdate, поэтому Consumer обновляется, даже когда компонент-предок выходит из обновления. ¹

Полный пример, полу-псевдокод.

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

Лучший способ, который позволяет вам осуществить передачу собственности, - это children как шаблон функции https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9

Фрагмент кода: https://stackblitz.com/edit/react-fcmubc

Пример:

const Parent = ({ children }) => {
    const somePropsHere = {
      style: {
        color: "red"
      }
      // any other props here...
    }
    return children(somePropsHere)
}

const ChildComponent = props => <h1 {...props}>Hello world!</h1>

const App = () => {
  return (
    <Parent>
      {props => (
        <ChildComponent {...props}>
          Bla-bla-bla
        </ChildComponent>
      )}
    </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, эта новая функция не имеет встроенного волшебного поведения для слияния стиля и имени класса по той же причине, по которой у нас нет этой функции из 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 (child, {ref: 'newRef'}) ДЕЙСТВИТЕЛЬНО переопределяет ссылку, поэтому два родителя по-прежнему не могут иметь ссылку на одного и того же дочернего элемента, если вы не используете callback-refs.

Это была критическая функция для внедрения в React 0.13, поскольку свойства теперь неизменяемы. Путь обновления часто заключается в клонировании элемента, но при этом вы можете потерять ссылку. Следовательно, здесь нам нужен был более удобный способ обновления. Когда мы обновляли call-сайты в Facebook, мы поняли, что нам нужен этот метод. Мы получили такие же отзывы от сообщества. Поэтому мы решили сделать еще один RC перед финальным выпуском, чтобы убедиться, что мы это получим.

Мы планируем в конечном итоге отказаться от React.addons.cloneWithProps. Мы пока этого не делаем, но это хорошая возможность подумать о собственном использовании и подумать об использовании вместо него React.cloneElement. Мы обязательно отправим выпуск с уведомлениями об устаревании, прежде чем мы действительно удалим его, поэтому никаких немедленных действий не требуется.

подробнее здесь ...

Мне нужно было исправить принятый выше ответ, чтобы он работал с использованием этого вместо указателя this. Это в рамках функции карты не имеет определенной функции 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 that = this

Ни один из ответов не касается проблемы наличия дочерних элементов, которые НЕ являются компонентами React, например текстовыми строками. Обходной путь может быть примерно таким:

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

}

Более чистый способ рассмотрения одного или нескольких детей

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

Если у вас несколько детей, которым вы хотите передавать реквизиты, вы можете сделать это таким образом, используя React.Children.map:

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

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

Если у вашего компонента есть только один дочерний элемент, нет необходимости в сопоставлении, вы можете сразу же cloneElement:

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

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

Вам больше не нужен {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>

Меня вдохновили все приведенные выше ответы, и я сделал это. Я передаю некоторые реквизиты, такие как некоторые данные, и некоторые компоненты.

import React from "react";

const Parent = ({ children }) => {
  const { setCheckoutData } = actions.shop;
  const { Input, FieldError } = libraries.theme.components.forms;

  const onSubmit = (data) => {
    setCheckoutData(data);
  };

  const childrenWithProps = React.Children.map(
    children,
    (child) =>
      React.cloneElement(child, {
        Input: Input,
        FieldError: FieldError,
        onSubmit: onSubmit,
      })
  );

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

В дополнение к ответу @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>

Согласно документации cloneElement()

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

Клонируйте и возвращайте новый элемент React, используя element в качестве отправной точки. Результирующий элемент будет иметь исходные реквизиты элемента с неглубоко объединенными новыми реквизитами. Новые дети заменят существующих детей. key и 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>
    )

}

Это должно сделать любой, у кого есть единственный дочерний элемент.

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

Метод 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)}

При использовании функциональных компонентов вы часто будете получать 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>
  )
}

Я пришел к этой публикации, когда искал аналогичную потребность, но мне показалось, что решение для клонирования, которое так популярно, слишком сырое и отвлекает меня от функциональности.

Я нашел статью в реакционных документах Компоненты высшего порядка

Вот мой образец:

import React from 'react';

const withForm = (ViewComponent) => {
    return (props) => {

        const myParam = "Custom param";

        return (
            <>
                <div style={{border:"2px solid black", margin:"10px"}}>
                    <div>this is poc form</div>
                    <div>
                        <ViewComponent myParam={myParam} {...props}></ViewComponent>
                    </div>
                </div>
            </>
        )
    }
}

export default withForm;


const pocQuickView = (props) => {
    return (
        <div style={{border:"1px solid grey"}}>
            <div>this is poc quick view and it is meant to show when mouse hovers over a link</div>
        </div>
    )
}

export default withForm(pocQuickView);

Для меня я нашел гибкое решение в реализации шаблона компонентов высшего порядка.

Конечно, это зависит от функциональности, но хорошо, если кто-то другой ищет аналогичное требование, это намного лучше, чем зависеть от кода реакции исходного уровня, такого как клонирование.

Другой шаблон, который я активно использую, - это шаблон контейнера. читайте об этом, там много статей.

Это то, что вам нужно?

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 props - наиболее точный подход к этой проблеме. Вместо того, чтобы передавать дочерний компонент родительскому компоненту в качестве дочерних свойств, разрешите родительскому компоненту визуализировать дочерний компонент вручную. Render - это встроенная функция в react, которая принимает параметр функции. В этой функции вы можете позволить родительскому компоненту отображать все, что вы хотите, с настраиваемыми параметрами. По сути, он делает то же самое, что и дочерний реквизит, но более настраиваемый.

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

Это w.r.t. React v17.x ...

Используйте children как функцию и передайте ей реквизиты как шаблон render props, как показано ниже: -

 <ParentComponent {...anyAdditionalProps}>
   {
     (actualPropsToPass) => <ChildComponent>{children(actualPropsToPass)}</ChildComponent>
   }
 </ParentComponent>

Просто убедитесь, что фактический, который будет проецироваться, контент должен быть добавлен как функция в шаблоне рендеринга реквизита, чтобы учесть аргумент, переданный как prop в дочерней функции.

Есть много способов сделать это.

Вы можете передать дочерние элементы в качестве реквизита в родительском элементе.

пример 1:

function Parent({ChildElement}){
   return <ChildElement propName={propValue} />
}

return <Parent ChildElement={ChildComponent}/>

Передать дочерние элементы как функцию

пример 2:

function Parent({children}){
   return children({className: "my_div"})
}

OR

function Parent({children}){
   let Child = children
   return <Child className='my_div' />
}

function Child(props){
  return <div {...props}></div>
}

export <Parent>{props => <Child {...props} />}</Parent>