首页 > 解决方案 > 在 reactjs 中将组件作为 prop 传递

问题描述

我认为这很简单,但看起来我做错了什么

const name = "Mike"
...
<MyComponent
    data={
        <Picture /> + " " + name
    }
/>

const Picture () => return <img src="..." />

const myComponent (props) => return props.data

我得到这个输出

[object Object] Mike

谢谢你!

标签: javascriptreactjs

解决方案


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}

在这部分代码中,您不应该使用 returnconst MyComponent = props => props.data;

如果您想以经典方式返回它,请这样写:

const MyComponent = props => {
    return props.data
};

推荐阅读