Question

这是我的代码

import React from 'react';
import styles from './Backdrop.css';

const Backdrop = props => {
  const bd = props.show ? <div className={styles.Backdrop} onClick={props.clicked} /> : null
  return (
    {bd}
  );
};

export default Backdrop;

我收到此错误消息

Objects are not valid as a React child (found: object with keys {bd}). If you meant to render a collection of children, use an array instead

我不明白我做错了什么，特别是因为我之前使用过这种语法，一切都还好。我知道我不必使用变量来显示它，但是该组件的最终版本需要将该部分代码用作变量。我能做些什么才能做到这一点？

Answer 1

在JSX元素中只需要{}花括号。在return语句中只返回变量。

const Backdrop = props => {
  const bd = props.show ? <div className={styles.Backdrop} onClick={props.clicked} /> : null
  return (
    bd
  );
};

与之相比：

const Backdrop = props => {
  const bd = props.show ? <div className={styles.Backdrop} onClick={props.clicked} /> : null
  return (
    // In a <h1> tag, you use curly braces
    <h1>{bd}</h1>
  );
};

Answer 2

您的return语句不需要花括号。只有在jsx表达式中才需要它们。返回是在jsx表达式结束之后。

React将“{variable}”语法视为对象

2 个答案: