reactjs - 在 React JSX 中将对象作为组件属性传递

Question

React新手的实验:

React.renderComponent(
  <MyComponent item={name: "A Name", description: "---"} />,
  document.getElementById('container')
);

控制台错误:

JSX value should be either an expression or a quoted JSX text

似乎不是这样工作的。我已经研究了 React 文档一段时间，但还没有找到答案。

Answer 1

您没有正确传递item的值。 foo={...} 表示 JSX 中的表达式，即 prop 值应作为 JavaScript 计算。然后您缺少对象文字的 {...} 。应该是

<MyComponent item={{name: "A Name", description: "---"}} />
//                 ^---       object literal       ---^
//                ^-----        expression        -----^

或者，如果您发现该语法不太可读，您可以先将对象分配给变量:

var item = {name: "A Name", description: "---"};
// ...
<MyComponent item={item} />

参见https://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions