Question

我花了很长时间试图追踪我的React组件中的非常奇怪的行为并弄清楚发生了什么。

原来我有两个看起来像这样的组件：

// class component
export class ParentComponent extends React.Component {
    render() {
        return (
            {...some stuff}
            <AnotherComponent someBoolean={true} />
        );
    }
}

// functional component
export const AnotherComponent = (someBoolean) => (
    <div>
        <!-- Some more HTML here -->
    </div>
);

我需要对someBoolean的结果进行一些条件格式化，并且在我的生活中不能弄清楚出了什么问题。因此，我只是将someBoolean设置为true并在AnotherComponent中呈现了结果。结果很奇怪，没有任何意义。

长话短说：我终于弄清楚发生了什么。我需要用括号括起AnotherComponent的参数，使它们看起来像这样：

export const AnotherComponent = ({someBoolean}) => (
    <div>
        <!-- Some more HTML here -->
    </div>
);

最后，一切顺利。我的问题是：为什么？为什么需要这个以及支架的包装是什么？我在那里找不到任何内容，React文档似乎都没有提到这一点。

Answer 1

功能组件的第一个参数是它的道具。所以你只是来自props对象的destructuring someBoolean。你也可以这样做：

export const AnotherComponent = (props) => (
  <div>{props.someBoolean}</div>
);

或

export const AnotherComponent = (props) => {
  const {someBoolean} = props;
  return (
    <div>{someBoolean}</div>
  );
};

您发现它的工作方式只是将语法缩短为一步。

为什么有必要将参数包装到大括号中的React功能组件？

1 个答案: