Question

我有一段JSX代码，但我不明白为什么其中一个变体无法正常工作。我认为props变量必须被销毁，但不会发生。

jsbin上有代码段：https://jsbin.com/lijusef/4/edit?js,output

// It's works fine
const Hello = (props) => <h1>{props.message}</h1>

// But it generates an error
//const Hello = ({message}) => <h1>{message}</h1>

// Why I can't deconstruct the props variable?


ReactDOM.render(
    <Hello message="Hello" />,
    document.getElementById('root')
);

在JSBin上抛出的错误是：

解析错误：第2行：意外的令牌=>错误：解析错误：第2行：意外的令牌=>

我希望那行

const Hello = (props) => <h1>{props.message}</h1>

和

const Hello = ({message}) => <h1>{message}</h1>

应该是等效的，但这种方式不起作用。为什么？

Answer 1

我们可以将分解与道具一起使用，但是由于分解是ES6功能，因此您必须使用Babel。

只需将您的JSBin的下拉列表从JSX（React）更改为ES6 / Babel，就可以使用。

希望能回答您的问题。

为什么props变量不能被删除？

1 个答案: