Question

我以为这很简单，但是看起来我做错了什么

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

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

const myComponent (props) => return props.data

我正在得到这个输出

[object Object] Mike

谢谢！

Answer 1

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

Answer 2

您应该将两个项目的传递分成两个不同的道具，而不是将它们连接在一起（它们都是不同的类型-ReactNode和string）。这样做的好处是可以更好地进行类型检查，尤其是在使用TypeScript或PropTypes的情况下。

<MyComponent
  data={<Picture />}
  name={user.name}
/>

然后在myComponent本身中，如果要在Picture下打印名称，则应执行此操作。

const myComponent = ({ data, name }) => (
  <>
    {data}
    {name}
  </>
);

Answer 3

您可以检查以下示例：

父组件

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>
        );
    }
}

Answer 4

您可以将组件作为道具传递。但是，请看这一行：

<Picture /> + " " + user.name

由于<AnyComponent />产生了一个React 元素，并且一个React元素在内部被表示为一个对象，因此您实际上是在这样做：

{} + " " + user.name

这就是为什么您在输出中看到[object Object]的原因。你应该做的是

function MyComponent({ pictureElement, name }) {
  return (
    <div>
      {pictureElement} {name}
    </div>
  );
}

将组件作为prop传递给reactjs

4 个答案: