Связывание компонентов React с использованием props.childern [duplicate]

Некоторая причина, по которой React.children не работал на меня. Это то, что сработало для меня.

Я хотел просто добавить класс к ребенку. аналогично изменению prop

 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 . Вы можете передать любую опору аналогичным образом

С обновлением для React 16.3 теперь вы можете использовать React.createContext.

import * as React from 'react';

// React.createContext accepts a defaultValue as the first param
const { Provider: ParentProvider, Consumer: ChildConsumer } = React.createContext(); 

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

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

class Child extends React.Component {
  render() {
    const { value } = this.props;
    return (
       <ChildConsumer> 
         (({ doSomething }) => {
           return <div onClick={() => doSomething(value)}>{value}</div>
         })
       </ChildConsumer>
    );
  }
}


// Example of using Parent and Child

import * as React from 'react';

class SomeComponent extends React.Component {

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

React.createContext сияет, где case React.cloneElement не может обрабатывать вложенные компоненты

class SomeComponent extends React.Component {

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

Пропустить реквизит для направления детей.

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

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

Контекст предназначен для обмена данными, которые можно считать «глобальными» для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочтительный язык. 1

Отказ от ответственности: это обновленный ответ, предыдущий использовал старый контекстный API

Он основан на принципе Consumer / Provide , Во-первых, создайте свой контекст

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, поэтому потребитель обновляется даже тогда, когда компонент-предок освобождается от обновления. 1

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

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

1 https://facebook.github.io/react/docs/context. HTML

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

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

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

Самый быстрый способ сделать это:

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

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

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, что = this

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

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

}

Это можно сделать просто как:

interface PaginationItemProps extends React.HTMLProps<HTMLDivElement> {
}

const PaginationItem = (props: PaginationItemProps) => {
   return <div>{props.children}</div>;
}

class Pagination extends React.Component<PaginationProps> {
  render() {
    return <div>          
        <PaginationItem>CHILDREN RENDER</PaginationItem>
    </div>
 }
}

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

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

Clone и возвратите новый элемент React, используя элемент в качестве отправной точки. Получившийся элемент будет иметь реквизит оригинального элемента с новым реквизитом, сложенным неглубоко. Новые дети заменят существующих детей. ключ и ref из исходного элемента будут сохранены.

React.cloneElement() почти эквивалентен:

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

Однако он также сохраняет ссылки. Это означает, что если вы получите ребенка с рефлексией на нем, вы случайно не украдете его у своего предка. Вы получите тот же ref, что и ваш новый элемент.

Итак, cloneElement - это то, что вы использовали бы для предоставления пользовательских реквизитов для детей. Однако в компоненте может быть несколько дочерних элементов, и вам нужно будет зациклиться на нем. Другие варианты подсказок позволяют вам сопоставить их с помощью React.Children.map. Однако React.Children.map, в отличие от React.cloneElement, изменяет ключи добавления Element и дополнительно .$ в качестве префикса. Проверьте этот вопрос для получения дополнительной информации: 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>

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