作为道具传递反应元件

使用 this.props.children是将实例化组件传递给反应组件的惯用方法

const Label = props => <span>{props.children}</span>
const Tab = props => <div>{props.children}</div>
const Page = () => <Tab><Label>Foo</Label></Tab>

当您直接将一个组件作为参数传递时，您将它未实例化地传递，并通过从道具中检索它来实例化它。这是一种传递组件类的惯用方法，这些组件类将被树中的组件实例化(例如，如果一个组件在标记上使用自定义样式，但是它想让使用者选择该标记是 div还是 span) :

const Label = props => <span>{props.children}</span>
const Button = props => {
const Inner = props.inner; // Note: variable name _must_ start with a capital letter
return <button><Inner>Foo</Inner></button>
}
const Page = () => <Button inner={Label}/>

如果您想要传递一个类似于子参数的参数作为道具，您可以这样做:

const Label = props => <span>{props.content}</span>
const Tab = props => <div>{props.content}</div>
const Page = () => <Tab content={<Label content='Foo' />} />

毕竟，React 中的属性只是普通的 JavaScript 对象属性，可以保存任何值——不管是字符串、函数还是复杂对象。

正如已接受的答案中指出的那样——您可以使用特殊的{ prop.children }属性。但是，您可以只传递一个组件作为道具作为标题请求。我认为这是干净的有时，因为你可能想通过几个组件，并有他们在不同的地方渲染。下面是反应文档中的一个例子:

Https://reactjs.org/docs/composition-vs-inheritance.html

请确保您实际上传递的是一个组件而不是一个对象(这最初让我失败了)。

代码很简单:

const Parent = () => {
return (
<Child  componentToPassDown={<SomeComp />}  />
)
}


const Child = ({ componentToPassDown }) => {
return (
<>
{componentToPassDown}
</>
)
}

在我的例子中，我将一些组件(type _ of _ FunctionComponent)堆叠到一个对象中，比如:

[
{...,one : ComponentOne},
{...,two : ComponentTwo}
]

然后我把它传递到动画滑块中，在幻灯片组件中，我做了:

const PassedComponent:FunctionComponent<any> = Passed;

然后使用它:

<PassedComponent {...custom_props} />

我必须有条件地渲染组件，所以下面的内容对我有帮助:

const Parent = () => {
return (
<Child  componentToPassDown={<SomeComp />}  />
)
}


const Child = ({ componentToPassDown }) => {
return (
<>
{conditionToCheck ? componentToPassDown : <div>Some other code</div>}
</>
)
}

使用 React 包中的“ React.createElement (Component，props)”怎么样

const showModalScrollable = (component, props) => {
Navigation.showModal({
component: {
name: COMPONENT_NAMES.modalScrollable,
passProps: {
renderContent: (componentId) => {
const allProps = { componentId, ...props };


return React.createElement(component, allProps);
},
},
},

};

通过使用渲染道具，你可以将一个函数作为一个组件传递，同时也可以共享来自父组件本身的道具:

<Parent
childComponent={(data) => <Child data={data} />}
/>


const Parent = (props) => {
const [state, setState] = useState("Parent to child")


return <div>{props.childComponent(state)}</div>
}