我以为这很简单,但是看起来我做错了什么
const name = "Mike"
...
<MyComponent
data={
<Picture /> + " " + name
}
/>
const Picture () => return <img src="..." />
const myComponent (props) => return props.data
我正在得到这个输出
[object Object] Mike
谢谢!
答案 0 :(得分:2)
const Picture = () => <img alt="" src="" />;
const MyComponent = props => props.data;
export default function App() {
return (
const user = ...
<MyComponent
data={
<>
<Picture />
{user.name}
</>
}
/>
);
}
任何值都应通过{your value}
{user.name}
在这部分代码中,您不应使用return const MyComponent = props => props.data;
如果您想以经典方式退还,请这样写:
const MyComponent = props => {
return props.data
};
答案 1 :(得分:1)
您应该将两个项目的传递分成两个不同的道具,而不是将它们连接在一起(它们都是不同的类型-ReactNode
和string
)。这样做的好处是可以更好地进行类型检查,尤其是在使用TypeScript
或PropTypes
的情况下。
<MyComponent
data={<Picture />}
name={user.name}
/>
然后在myComponent本身中,如果要在Picture
下打印名称,则应执行此操作。
const myComponent = ({ data, name }) => (
<>
{data}
{name}
</>
);
答案 2 :(得分:0)
您可以检查以下示例:
父组件
import React, {Component, useEffect, useState} from 'react';
import {ChildComp} from "./ChildComp";
import {Hello} from "./Hello";
export class ParentComp extends Component {
render() {
return (
<div>
<ChildComp>
<Hello/>
</ChildComp>
</div>
);
}
}
子组件
import React, {Component, useEffect, useState} from 'react';
export class ChildComp extends Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
您好组件
import React, {Component, useEffect, useState} from 'react';
export class Hello extends Component {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
}
答案 3 :(得分:-1)
您可以将组件作为道具传递。但是,请看这一行:
<Picture /> + " " + user.name
由于<AnyComponent />
产生了一个React 元素,并且一个React元素在内部被表示为一个对象,因此您实际上是在这样做:
{} + " " + user.name
这就是为什么您在输出中看到[object Object]
的原因。你应该做的是
function MyComponent({ pictureElement, name }) {
return (
<div>
{pictureElement} {name}
</div>
);
}