Javascript 如何将一个组件作为道具传递到React中的另一个组件？

我是新手，而且我有Java背景，所以如果这个问题的措辞没有真正意义，请原谅

我想将一个组件的实例“传递”到另一个组件中（该组件在其render（）方法中使用传递的组件）

---

我怎样才能做到这一点呢？

很抱歉命名错误，但我希望您能够从我从您的问题中了解到的不同用例：

// Component that receives another component being passed in its props
function Renderer1(props) {
  return props.component
}

// Component that receives another component and creates an instance of it
// this way this component has more control of rendering the passed component
// and the props you want to pass to it
function Renderer2(props) {
  return <props.component />
}

// Component being passed in props
function PropComponent(){
   return <div>Hello world!</div>
}

// Rendered component, example 1
function Main1() { 
   return <Renderer1 component={() => <PropComponent />} />
}

// Rendered component, example 2, this one uses Renderer2 component
function Main2() { 
   return <Renderer2 component={PropComponent} />
}

//接收另一个在其道具中传递的组件的组件
功能渲染器1（道具）{
返回道具组件
}
//接收另一个组件并创建其实例的组件
//这样，该组件可以更好地控制渲染传递的组件
//还有你想传递给它的道具
功能渲染器2（道具）{
返回
}
//在道具中传递的组件
函数PropComponent（）{
返回你好世界！
}
//渲染组件，示例1
函数Main1（）{
return}/>
}
//渲染组件，示例2，此组件使用Renderer2组件
函数Main2（）{
返回
}

---

我希望通过这些不同的例子，你能了解如何继续你的工作：）

问题不是很清楚。但据我所知，有多种方法可以做到这一点

组成部分1

class Component1 extends React.Component {
    render() {
        return <h1>Component 1</h1>;
    }
}

类组件1扩展了React.Component{
render（）{
返回组件1；
}
}

构成部分2

class Component2 extends React.Component {
    render() {
        return (
            <React.Fragment>
                <h1>Component 2</h1>
                {children}
            </React.Fragment>
    }
}

class Component2扩展了React.Component{
render（）{
返回(
构成部分2
{儿童}
}
}

主要成分

class MainComponent extends React.Component {
    render() {
        return (
            <Component2>
                <Component1 />
            </Component2>
    }
}

class MainComponent扩展了React.Component{
render（）{
返回(
}
}

这里，Component1的一个“实例”被传递给Component2，然后Component2将Component1呈现为它的一个子组件

另一种方法是使用。为了更好地理解渲染道具，您可以观看。

这能解决您的问题吗？下面是一些示例