从方法呈现时将参数传递给react组件

Question

I am playing with React.js (I am new to it) and had a strange issue.

I can render a sub-component from the parent's render. This works:

<Station id="1" label="Start" />

I tried to extract this to a method:

renderStation(id, label) {
  return <Station id="{id}" label="{label}" />
}
// call it from the render() as
{this.renderStation(1, "Start")}

Strangely it passes in the strings "{id}" and "{label}" as props instead of "1" and "Start". Rendering a <div>{id}</div> from the same method just works fine. What is wrong?

See my playground with the repro here: https://jscomplete.com/repl?j=HybEKZuub

Answer 1

请删除双引号，您可以开始使用。

<Station id={id} label={label} />

Answer 2

To Avoid confusion..

let props = {
 "id":id,
 "label":label
}
<Station {...props} />