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

Answer 2

或者，如果您希望MyComponent内部this.props.name和this.props.description代替this.props.item.name和this.props.item.description，则可以使用以下语法：

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

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

2 个答案: