한 구성 요소를 다른 반응 구성 요소로 전달하는 방법이 있습니까? 모델 반응 구성 요소를 만들고 다른 반응 구성 요소를 전달하여 해당 내용을 변환하고 싶습니다.

편집 : 여기 내가하려는 일을 보여주는 reactJS 코드 펜이 있습니다. http://codepen.io/aallbrig/pen/bEhjo

HTML

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

반응 JS

/**@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“특별한 소품”반작용에, 위의 예제는 문법 설탕과에 (거의) 동일합니다<Wrapper children={<App/>}/>

초기화 래퍼 / HOC

HOC ( Higher Order Component)를 사용할 수 있습니다 . 최근에 공식 문서 에 추가되었습니다 .

// 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를 사용하여 렌더링을 한 단계 앞당길 수 있기 때문에 성능이 약간 저하 될 수 있습니다. 컴포넌트가 PureComponent를 확장하더라도

이 공지 사항 connect돌아 오는의 런타임 래퍼로 사용하지만 쓸모 방지 할 수있게 때문에 HOC로 변경 재 – 렌더링 당신이 사용하는 경우 pure(기본적으로 true입니다) 옵션을

React 컴포넌트를 작성하는 데 많은 비용이들 수 있으므로 렌더링 단계에서 HOC를 호출하면 안됩니다. 초기화시이 랩퍼를 호출해야합니다.

위와 같은 기능적 구성 요소를 사용할 때 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>

답변

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

그런 다음 래퍼 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 컴포넌트가됩니다.