Question

我是React的新手，并且具有Java背景，因此请宽恕这个问题的措辞没有道理。

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

我该怎么做？

Answer 1

很抱歉，命名不正确，但我希望您能够从我对问题的理解中看到与众不同的用例：

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

我希望通过这些不同的示例，您可以了解如何继续您的工作：)

Answer 2

问题不是很清楚。但是据我了解，可以有多种方法。

组件1

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

组件2

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

MainComponent

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

在这里，将Component1的一个“实例”传递给Component2，该组件随后将Component1呈现为其子元素之一。

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

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

2 个答案: