Question

我不明白，为什么会这样？

import React from 'react'

import './Card.scss'

export default ({ type = 'single' }) => (
  <div>{type}</div>
)

这不是吗？

import React from 'react'

import './Card.scss'

export default ( type = 'single' ) => (
  <div>{type}</div>
)

Answer 1

在评论中，您已经说过直接将其用作React组件，例如：

<Card type="single" />

和

<Card/>

您需要使用析构版本（您的第一个示例），因为React组件是使用单个参数调用的，该对象包含组件的属性（如果您未指定任何属性，则为空白对象）。一个非破坏性的没有意义，你收到的type将是一个对象，而不是一个字符串。

这是一个片段，展示了React传递给组件的内容，这应该澄清为什么期望一个简单的参数作为字符串不起作用：

let Example = (props) => (
  <div>props: [{JSON.stringify(props)}]</div>
);
let Card = ({type = "simple"}) => (
  <div>Type: [{type}]</div>
);
ReactDOM.render(
  <div>
    <Example />
    <Example answer="42" />
    <Card type="simple" />
  </div>
  ,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

在你明确表示你直接使用它作为组件之前的原始答案：

两个工作，这是你如何调用每个人的问题。¹

您的第一个示例应该像这样调用：

import thingy from 'somewhere';
thingy({type: 'double'});
//     ^--------------^---- note it's an object

...因为它破坏了它的论点。

你的第二个例子应该像这样调用：

import thingy from 'somewhere';
thingy('double');
//     ^------^---- note it's not an object

...因为它只是使用一个简单的参数。

~~另外：您的第一个示例没有参数的默认值，因此您根本不能调用它：~~

// Doesn't work for the first example thingy();

如果您希望能够这样做，则需要提供整体默认值：

export default ({ type = 'single' } = {}) => ( // Overall default ----------------^^^^^ <div>{type}</div> )

但是你的第二个例子可以完全没有参数地被调用，因为它的唯一参数有一个默认值。

（无所谓，React总是用一个对象参数调用它。）

将默认对象作为函数参数es6传递但不作为普通参数

1 个答案: