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

Редактировать: Вот кодекс ручки JJ, иллюстрирующий то, что я пытаюсь сделать. http://codepen.io/aallbrig/pen/bEhjo

HTML

<div id="my-component">
    <p>Hi!</p>
</div>

ReactJS

/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
      <div>
        <p> Added title </p>
        {this.props.children}
      </div>
    )
  }
});

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

Вы можете использовать this.props.childrenдля визуализации любых потомков, которые содержит компонент:

const Wrap = ({ children }) => <div>{children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>

Обратите внимание, что я предоставил более подробный ответ здесь

Оболочка времени выполнения:

Это самый идиоматичный способ.

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

Обратите внимание, что childrenэто «особая опора» в React, и приведенный выше пример является синтаксическим сахаром и (почти) эквивалентен<Wrapper children={<App/>}/>

Инициализация оболочки / HOC

Вы можете использовать Компонент высшего порядка (HOC). Они были добавлены в официальный документ недавно.

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

Это может привести к (немного) лучшей производительности, потому что компонент-оболочка может закорочить рендеринг на один шаг вперед с shouldComponentUpdate, в то время как в случае оболочки-оболочки времени выполнения дочерний объект всегда будет отличаться от ReactElement и вызывать повторные рендеры. даже если ваши компоненты расширяют PureComponent.

Заметь connect Redux раньше был оболочкой времени выполнения, но был изменен на HOC, потому что он позволяет избежать бесполезных повторных рендеров, если вы используете эту pureопцию (которая по умолчанию верна)

Вы никогда не должны вызывать HOC на этапе рендеринга, потому что создание компонентов React может быть дорогостоящим. Вы должны скорее вызывать эти оболочки при инициализации.

Обратите внимание, что при использовании функциональных компонентов, подобных описанным выше, версия HOC не обеспечивает никакой полезной оптимизации, поскольку функциональные компоненты без сохранения состояния не реализуют shouldComponentUpdate

Больше объяснений здесь: https://stackoverflow.com/a/31564812/82609

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

Facebook рекомендует использовать компонент без сохранения состояния. Источник: https://facebook.github.io/react/docs/reusable-components.html.

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

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);

Вы можете передать его как обычный реквизит: foo={<ComponentOne />}

Например:

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>

Я предпочитаю использовать встроенный API React:

import React, {cloneElement, Component} from "react";
import PropTypes from "prop-types";

export class Test extends Component {
  render() {
    const {children, wrapper} = this.props;
    return (
      cloneElement(wrapper, {
        ...wrapper.props,
        children
      })
    );
  }
}

Test.propTypes = {
  wrapper: PropTypes.element,
  // ... other props
};

Test.defaultProps = {
  wrapper: <div/>,
  // ... other props
};

тогда вы можете заменить div-обертку тем, что вы хотите:

<Test wrapper={<span className="LOL"/>}>
  <div>child1</div>
  <div>child2</div>
</Test> 

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

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

Затем вы передадите propвызванный child, который будет компонентом React.

Позднее с игрой, но вот мощный шаблон HOC для переопределения компонента, предоставляя его в качестве опоры. Это просто и элегантно.

предполагать MyComponent рендерит вымышленный Aкомпонент, но вы хотите разрешить пользовательское переопределение A, в этом примере B, которое переносится Aв a, <div>...</div>а также добавляет "!" к текстовой опоре:

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);

На самом деле, ваш вопрос заключается в том, как написать компонент высшего порядка (HOC). Основная цель использования HOC - предотвращение копирования. Вы можете написать свой HOC как чисто функциональный компонент или как класс, вот пример:

    class Child extends Component {
    render() {
        return (
            <div>
                Child
            </div>
        );
    }
}

Если вы хотите написать свой родительский компонент как компонент на основе классов:

    class Parent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

Если вы хотите написать своего родителя как функциональный компонент:

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}

Ниже приведен пример родительского компонента реагирования List , в котором реквизиты содержат элемент реагирования. В этом случае передается только один компонент реакции Link (как видно из dom render).

class Link extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <p>{this.props.name}</p>
      </div>
     );
  }
}
class List extends React.Component {
  render(){
   return(
    <div>
       {this.props.element}
       {this.props.element}
    </div>
   );
  }
}

ReactDOM.render(
  <List element = {<Link name = "working"/>}/>,
  document.getElementById('root')
);

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