Gibt es eine Möglichkeit, eine Komponente in eine andere Reaktionskomponente zu übertragen? Ich möchte eine Modellreaktionskomponente erstellen und eine andere Reaktionskomponente übergeben, um diesen Inhalt zu transklamieren.

Bearbeiten: Hier ist ein ReactJS-Codepen, der veranschaulicht, was ich versuche zu tun. 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'));

Sie können verwenden this.props.children, um alle untergeordneten Elemente zu rendern, die die Komponente enthält:

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

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

Hinweis versehen ich eine tiefer gehende Antwort hier

Laufzeit-Wrapper:

Es ist der idiomatischste Weg.

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

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

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

Beachten Sie, dass dies childreneine "spezielle Requisite" in React ist. Das obige Beispiel ist syntaktischer Zucker und entspricht (fast)<Wrapper children={<App/>}/>

Initialisierungs-Wrapper / HOC

Sie können eine Komponente höherer Ordnung ( Higher Order Component, HOC) verwenden. Sie wurden kürzlich zum offiziellen Dokument hinzugefügt .

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

Dies kann zu (wenig) besseren Leistungen führen, da die Wrapper-Komponente das Rendern mit shouldComponentUpdate einen Schritt vorausschließen kann, während bei einem Laufzeit-Wrapper die untergeordnete Requisite wahrscheinlich immer ein anderes ReactElement ist und ein erneutes Rendern verursacht auch wenn Ihre Komponenten PureComponent erweitern.

Beachten Sie, dass connectRedux früher ein Laufzeit-Wrapper war, aber in ein HOC geändert wurde, da es unnötige Renderings vermeiden kann, wenn Sie die pureOption verwenden (was standardmäßig der Fall ist).

Sie sollten während der Renderphase niemals ein HOC aufrufen, da das Erstellen von React-Komponenten teuer sein kann. Sie sollten diese Wrapper lieber bei der Initialisierung aufrufen.

Beachten Sie, dass die HOC-Version bei Verwendung von Funktionskomponenten wie oben keine nützliche Optimierung bietet, da zustandslose Funktionskomponenten nicht implementiert werden shouldComponentUpdate

Weitere Erklärungen hier: 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 empfiehlt die Verwendung zustandsloser Komponenten. Quelle: https://facebook.github.io/react/docs/reusable-components.html

In einer idealen Welt wären die meisten Ihrer Komponenten zustandslose Funktionen, da wir in Zukunft auch Leistungsoptimierungen für diese Komponenten vornehmen können, indem unnötige Überprüfungen und Speicherzuweisungen vermieden werden. Dies ist nach Möglichkeit das empfohlene Muster.

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

Sie können es als normale Requisite übergeben: foo={<ComponentOne />}

Beispielsweise:

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

Ich bevorzuge die integrierte React-API:

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

dann können Sie das Wrapper-Div durch das ersetzen, was Sie wollen:

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

Sie können eine Komponente über übergeben. die Requisiten und rendern es mit Interpolation.

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

Sie würden dann eine propaufgerufene childKomponente übergeben, die eine React-Komponente wäre.

Spät im Spiel, aber hier ist ein leistungsstarkes HOC-Muster zum Überschreiben einer Komponente, indem sie als Requisite bereitgestellt wird. Es ist einfach und elegant.

Angenommen, es wird MyComponenteine fiktive AKomponente gerendert, aber Sie möchten Ain diesem Beispiel eine benutzerdefinierte Überschreibung von zulassen B, die Aein <div>...</div>einschließt und auch "!" zur Textstütze:

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

Ihre Frage ist eigentlich, wie Sie eine Komponente höherer Ordnung (Higher Order Component, HOC) schreiben. Das Hauptziel der Verwendung von HOC besteht darin, das Einfügen von Kopien zu verhindern. Sie können Ihr HOC als rein funktionale Komponente oder als Klasse schreiben. Hier ein Beispiel:

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

Wenn Sie Ihre übergeordnete Komponente als klassenbasierte Komponente schreiben möchten:

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

Wenn Sie Ihren Elternteil als Funktionskomponente schreiben möchten:

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

Hier ist ein Beispiel eines übergeordneten Liste react Komponente und whos Requisiten enthalten ein Element reagieren. In diesem Fall wird nur eine einzelne Link- Reaktionskomponente übergeben (wie im dom-Rendering dargestellt).

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

Ja, Sie können dies mit Requisiten tun. Sie können Daten der Komponente als Objekt wie Requisiten übergeben und dann innerhalb der Komponente eine andere Komponente importieren und dynamisch mit Prpps-Daten binden. Lesen Sie mehr über die Reaktionskomponente