blocks|key|4579754|text|你可以通过传入一个组件。道具，并使用插值进行渲染。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4579755|var+DivWrapper+=+React.createClass({
++++render:+function()+{
++++++++return+<div>{+this.props.child+}</div>;
++++}
});|code-block|syntax|javascript|4579756|然后传入一个名为child的prop，它将是一个React组件。|offset|length|style|CODE|4579757|entityMap^0|0|0|8|5|E|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>You can pass in a component via. the props and render it with interpolation.</p>

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

<p>You would then pass in a <code>prop</code> called <code>child</code>, which would be a React component.</p>


blocks|key|73426|text|您可以使用this.props.children呈现组件包含的任何子项：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|73427|const+Wrap+=+({+children+})+=>+<div>{children}</div>

export+default+()+=>+<Wrap><h1>Hello+word</h1></Wrap>|code-block|syntax|javascript|73428|entityMap^0|5|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can use <code>this.props.children</code> to render whatever children the component contains:</p>

<pre class="lang-jsx prettyprint-override"><code>const Wrap = ({ children }) =&gt; &lt;div&gt;{children}&lt;/div&gt;

export default () =&gt; &lt;Wrap&gt;&lt;h1&gt;Hello word&lt;/h1&gt;&lt;/Wrap&gt;
</code></pre>


blocks|key|4579809|text|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}+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4579810|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>const ParentComponent = (props) =&gt; {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

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

//place in var
const myComponent = &lt;MyComponent /&gt;

//pass as prop
&lt;ParentComponent childComponent={myComponent} /&gt;
</code></pre>


blocks|key|4579837|text|我更喜欢使用React内置API：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4579838|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
};|code-block|syntax|javascript|4579839|然后，您可以将包装器div替换为您想要的内容：|4579840|<Test+wrapper={<span+className="LOL"/>}>
++<div>child1</div>
++<div>child2</div>
</Test>+|4579841|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>i prefer using React built-in API:</p>

<pre><code>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: &lt;div/&gt;,
  // ... other props
};
</code></pre>

<p>then you can replace the wrapper div with what ever you want: </p>

<pre><code>&lt;Test wrapper={&lt;span className="LOL"/&gt;}&gt;
  &lt;div&gt;child1&lt;/div&gt;
  &lt;div&gt;child2&lt;/div&gt;
&lt;/Test&gt; 
</code></pre>


blocks|key|73498|text|你可以将它作为一个普通的道具来传递：foo={<ComponentOne+/>}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|73499|例如：|73500|const+ComponentOne+=+()+=>+<div>Hello+world!</div>
const+ComponentTwo+=+()+=>+(
++<div>
++++<div>Hola+el+mundo!</div>
++++<ComponentThree+foo={<ComponentOne+/>}+/>
++</div>
)
const+ComponentThree+=+({+foo+})+=>+<div>{foo}</div>|code-block|syntax|javascript|73501|entityMap^0|I|M|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>You can pass it as a normal prop: <code>foo={&lt;ComponentOne /&gt;}</code></p>

<p>For example:</p>

<pre><code>const ComponentOne = () =&gt; &lt;div&gt;Hello world!&lt;/div&gt;
const ComponentTwo = () =&gt; (
  &lt;div&gt;
    &lt;div&gt;Hola el mundo!&lt;/div&gt;
    &lt;ComponentThree foo={&lt;ComponentOne /&gt;} /&gt;
  &lt;/div&gt;
)
const ComponentThree = ({ foo }) =&gt; &lt;div&gt;{foo}&lt;/div&gt;
</code></pre>


blocks|key|4579903|text|这是游戏的晚期，但这里有一个强大的HOC模式，用于通过将组件作为道具提供来覆盖组件。它简单而优雅。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4579904|假设MyComponent呈现了一个虚构的A组件，但您希望允许自定义覆盖A，在本例中为B，它将A包装在<div>...</div>中并附加"!“到文本道具：|offset|length|style|CODE|4579905|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+%2B+'!'}></div>
);

ReactDOM.render(<MyComponent+A={B}/>);|code-block|syntax|javascript|4579906|entityMap^0|0|2|B|L|1|10|1|17|1|1B|1|1F|E|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]|$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|N|$]]

<p>Late to the game, but here's a powerful HOC pattern for overriding a component by providing it as a prop. It's simple and elegant.</p>

<p>Suppose <code>MyComponent</code> renders a fictional <code>A</code> component but you want to allow for a custom override of <code>A</code>, in this example <code>B</code>, which wraps <code>A</code> in a <code>&lt;div&gt;...&lt;/div&gt;</code> and also appends "!" to the text prop:</p>

<pre class="lang-js prettyprint-override"><code>import A from 'fictional-tooltip';

const MyComponent = props =&gt; (
  &lt;props.A text="World"&gt;Hello&lt;/props.A&gt;
);
MyComponent.defaultProps = { A };

const B = props =&gt; (
  &lt;div&gt;&lt;A {...props} text={props.text + '!'}&gt;&lt;/div&gt;
);

ReactDOM.render(&lt;MyComponent A={B}/&gt;);
</code></pre>


blocks|key|4579945|text|实际上，您的问题是如何编写高阶组件(HOC)。使用HOC的主要目的是防止复制粘贴。您可以将您的HOC编写为一个纯功能组件或一个类，下面是一个示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4579946|++++class+Child+extends+Component+{
++++render()+{
++++++++return+(
++++++++++++<div>
++++++++++++++++Child
++++++++++++</div>
++++++++);
++++}
}|code-block|syntax|javascript|4579947|如果要将父组件编写为基于类的组件：|4579948|++++class+Parent+extends+Component+{
++++render()+{
++++++++return+(
++++++++++++<div>
++++++++++++++++{this.props.children}
++++++++++++</div>
++++++++);
++++}
}|4579949|如果你想把你的父组件写成一个功能组件：|4579950|++++const+Parent=props=>{
++++return(
++++++++<div>
++++++++++++{props.children}
++++++++</div>
++++)
}|4579951|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Actually, your question is how to write a Higher Order Component (HOC). The main goal of using HOC is preventing copy-pasting. You can write your HOC as a purely functional component or as a class here is an example:</p>

<pre><code>    class Child extends Component {
    render() {
        return (
            &lt;div&gt;
                Child
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>If you want to write your parent component as a class-based component:</p>

<pre><code>    class Parent extends Component {
    render() {
        return (
            &lt;div&gt;
                {this.props.children}
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>If you want to write your parent as a functional component:</p>

<pre><code>    const Parent=props=&gt;{
    return(
        &lt;div&gt;
            {props.children}
        &lt;/div&gt;
    )
}
</code></pre>


blocks|key|4579978|text|您可以将组件作为道具传递，并使用与使用组件相同的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4579979|function+General(props)+{
++++...
++++return+(<props.substitute+a={A}+b={B}+/>);
}

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

<General+substitute=SpecificA+/>
<General+substitute=SpecificB+/>|code-block|syntax|javascript|4579980|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can pass your component as a prop and use the same way you would use a component.</p>
<pre><code>function General(props) {
    ...
    return (&lt;props.substitute a={A} b={B} /&gt;);
}

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

&lt;General substitute=SpecificA /&gt;
&lt;General substitute=SpecificB /&gt;
</code></pre>


blocks|key|4579997|text|您可以将react组件传递给另一个组件，并从子组件发出函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4579998|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>
)|code-block|syntax|javascript|4579999|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you can pass your react component into another component and emit the function from child</p>
<pre><code>import CustomerFilters;

parent:

const handleFilterChange = (value) =&gt; {
 console.log(value)
}

&lt;DataGrid
   contentName=&quot;customer&quot;
   fetchFilterComponents = {&lt;CustomerFilters onSelectFilter={handleFilterChange} /&gt;}
&lt;/DataGrid&gt;


child:
CustomerFilters
return (

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


<p>Is there a way to pass one component into another react component?  I want to create a model react component and pass in another react component in order to transclude that content.</p>

<p>Edit: Here is a reactJS codepen illustrating what I'm trying to do. <a href="http://codepen.io/aallbrig/pen/bEhjo">http://codepen.io/aallbrig/pen/bEhjo</a></p>

<p>HTML</p>

<pre><code>&lt;div id="my-component"&gt;
    &lt;p&gt;Hi!&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>ReactJS</p>

<pre><code>/**@jsx React.DOM*/

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

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));
</code></pre>


How to pass in a react component into another react component to transclude the first component's content?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

有没有办法将一个组件传递给另一个react组件？我想创建一个模型react组件，并传入另一个react组件，以便转换该内容。编辑:这是一段reactJS代码，说明了我想要做的事情。HTML<div id="my-component">    <p>Hi!</p></div>ReactJS/**@jsx React.DO...

问如何将一个react组件传入到另一个react组件中以转换第一个组件的内容？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将一个react组件传入到另一个react组件中以转换第一个组件的内容？EN