첫 번째 컴포넌트의 함량을 초월하기 위해 반응 컴포넌트를 다른 반응 컴포넌트로 전달하려면 어떻게 해야 합니까?

첫 번째 컴포넌트의 함량을 초월하기 위해 반응 컴포넌트를 다른 반응 컴포넌트로 전달하려면 어떻게 해야 합니까?

한 구성 요소를 다른 반응 구성 요소로 전달할 수 있는 방법이 있습니까?그 내용을 초월하기 위해 모델 리액션 컴포넌트를 만들고 다른 리액션 컴포넌트를 전달하고 싶습니다.

편집: 다음은 반응입니다.JS 코드펜은 내가 뭘 하려는지 보여줍니다.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>
);

주의:childrenReact의 "특수 프로펠러"이며 위의 예는 구문당이며 (거의) 와 동등합니다.<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);

랩퍼 컴포넌트가 show Component Update를 사용하여 렌더링을 한 단계 먼저 단락할 수 있기 때문에 성능이 향상될 수 있습니다.또한 런타임 래퍼의 경우 하위 소품은 항상 다른 ReactElement이며 컴포넌트가 PureComponent를 확장하더라도 재렌더(rerender)를 일으킬 수 있습니다.

주의해 주세요connectRedux는 런타임 래퍼였지만 HOC로 변경되었습니다.이것은, Redux 를 사용하는 경우, 불필요한 재렌더를 회피할 수 있기 때문입니다.pureoption (디폴트로는 true)

렌더링 단계에서는 리액트 구성 요소를 만드는 데 비용이 많이 들 수 있으므로 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} />

일반 소품으로 전달할 수 있습니다.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>

Facebook은 스테이트리스 컴포넌트 사용을 권장합니다.출처 : https://web.archive.org/web/20160608001717/http : //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);

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

그런 다음 wrapper 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리액트 컴포넌트입니다.

늦었지만 컴포넌트를 소품으로 제공함으로써 오버라이드하기 위한 강력한 HOC 패턴이 있습니다.심플하고 우아해요.

가정하다MyComponent인 것을 A입니다만, 는, 「Custom Override」를 허가합니다.A 이에서는,B랩))Ain a a 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(Higher Order Component)를 작성하는 방법에 대한 질문이 있습니다.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>
    );
}

다음은 부모 목록 반응 구성요소의 예이며, 소품에는 반응 요소가 포함되어 있습니다.이 경우 링크 리액트컴포넌트는 1개만 전달됩니다(돔 렌더 참조).

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

컴포넌트를 소품으로 전달하고 컴포넌트를 사용하는 것과 같은 방법으로 사용할 수 있습니다.

function General(props) {
    ...
    return (<props.substitute a={A} b={B} />);
}

function SpecificA(props) { ... }
function SpecificB(props) { ... }

<General substitute=SpecificA />
<General substitute=SpecificB />

래퍼 컴포넌트를 만듭니다.

export const Wrapper = (props) => {
    return(<>
        <Menu />
        {props.children}
        <Footer />
        </>
    )
}

이제 새 파일을 기존 구조물에 넣을 수 있습니다.
루트에는 다음과 같은 컴포넌트가 포함됩니다.

 <Route path="/"  element={<Wrapper><ExampleComponent /></Wrapper>} />

반응 컴포넌트를 다른 컴포넌트로 전달하여 아이로부터 기능을 방출할 수 있습니다.

import CustomerFilters;

parent:

const handleFilterChange = (value) => {
 console.log(value)
}

<DataGrid
   contentName="customer"
   fetchFilterComponents = {<CustomerFilters onSelectFilter={handleFilterChange} />}
</DataGrid>


child:
CustomerFilters
return (

        <select className="filters-dropdown" onChange={onSelectFilter}>
          <option>Select Filter</option>
          {customerFilterOptions?.map((filter: any) => {
            return <option value={filter.value}>{filter.name}</option>;
          })}
        </select>
)

언급URL : https://stackoverflow.com/questions/25797048/how-to-pass-in-a-react-component-into-another-react-component-to-transclude-the