javascript - instalar - react js installation

¿Cómo pasar un componente de reacción a otro componente de reacción para transcluir el contenido del primer componente?

Question

¿Hay alguna manera de pasar un componente a otro componente de reacción? Quiero crear un modelo de componente de reacción y pasar otro componente de reacción para poder incluir ese contenido.

Editar: Aquí hay un codepen reactJS que ilustra lo que estoy tratando de hacer. 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''));

Answer 1

Al final del juego, pero aquí hay un poderoso patrón HOC para anular un componente al proporcionarlo como accesorio. Es simple y elegante.

Suponga que MyComponent representa un componente A ficticio pero desea permitir una anulación personalizada de A , en este ejemplo B , que envuelve A en un <div>...</div> y también agrega "!" al texto prop:

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

Answer 2

Aquí hay un ejemplo de un componente de reacción Lista principal y cuyos accesorios contienen un elemento de reacción. En este caso, solo se pasa un único componente de reacción de enlace (como se ve en el render dom).

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

Answer 3

En realidad, su pregunta es cómo escribir un Componente de orden superior (HOC). El objetivo principal de usar HOC es evitar el pegado de copias. Puede escribir su HOC como un componente puramente funcional o como una clase. Aquí hay un ejemplo:

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

Si desea escribir su componente principal como un componente basado en la clase:

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

Si desea escribir a su padre como un componente funcional:

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

Answer 4

Facebook recomienda el uso de componentes sin estado Fuente: https://facebook.github.io/react/docs/reusable-components.html

En un mundo ideal, la mayoría de sus componentes serían funciones sin estado porque en el futuro también podremos realizar optimizaciones de rendimiento específicas para estos componentes al evitar verificaciones innecesarias y asignaciones de memoria. Este es el patrón recomendado, cuando sea posible.

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

Answer 5

Puede pasar un componente a través de. los accesorios y renderizarlo con interpolación.

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

Luego pasarías un prop llamado child , que sería un componente React.

Answer 6

Puede pasarlo como un accesorio normal: foo={<ComponentOne />}

Por ejemplo:

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

Answer 7

Puede usar this.props.children para representar cualquier elemento this.props.children que this.props.children el componente:

const Wrap = props => <div>{props.children}</div>
export default () => <Wrap><h1>Hello word</h1></Wrap>

Answer 8

Tenga en cuenta que proporcioné una respuesta más detallada here

Contenedor de tiempo de ejecución:

Es la forma más idiomática.

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

Tenga en cuenta que children es un "accesorio especial" en React, y el ejemplo anterior es azúcar sintáctico y es (casi) equivalente a <Wrapper children={<App/>}/>

Inicialización wrapper / HOC

Puede usar un Componente de orden superior (HOC). Se han agregado al documento oficial recientemente.

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

Esto puede conducir a (poco) mejores rendimientos porque el componente contenedor puede cortocircuitar la representación un paso adelante con shouldComponentUpdate, mientras que en el caso de un contenedor de tiempo de ejecución, es probable que el elemento secundario siempre sea un ReactElement diferente y cause re-renderizaciones incluso si sus componentes extienden PureComponent.

Tenga en cuenta que la connect de Redux solía ser un contenedor de tiempo de ejecución, pero se cambió a un HOC porque permite evitar representaciones inútiles si usa la opción pure (que es verdadera por defecto)

Nunca debe llamar a un HOC durante la fase de renderizado porque crear componentes React puede ser costoso. Debería llamar a estos contenedores en la inicialización.

Tenga en cuenta que cuando se usan componentes funcionales como los anteriores, la versión HOC no proporciona ninguna optimización útil porque los componentes funcionales sin estado no se implementan shouldComponentUpdate

Más explicaciones aquí: here

Answer 9

prefiero usar React API incorporada:

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

entonces puedes reemplazar el wrapper div con lo que quieras:

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

Answer 10

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