反應： Map Function 內的兒童道具

Question

父組件初始化如下：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      children: [
        {name: "Julien Lennon"},
        {name: "Sean Lennon"}
      ]
    }
  }
  render() {
    return <div class="parent">Parent, called {this.props.name}
        {this.state.children.map((child, index) => {
          return (
            <Child name="{child.name}" />
          );
        })}
    </div>;
  }
}

現在，在孩子中，我只想訪問 name 道具：

class Child extends React.Component {
  render() {
    return <div class="child">Child named {this.props.name}</div>;
  }
}

但是它將名稱輸出為文字： Child named {child.name}

小提琴： https://jsfiddle.net/89k1zcdp/6/

Answer 1

而是這樣做

<Child name={child.name} />

Answer 2

您只需要在父組件的渲染 function 中刪除 {child.name} 周圍的引號。 像這樣：

<Child name={child.name} />

解釋：在 React 中，類似 HTML 的代碼實際上是 React 自己的模板語言，稱為 JSX。 在 JSX 中，您可以通過將一段代碼括在括號中來指示將其解釋為 JavaScript：{}。 但是由於"{child.name}"包含在這些雙引號中，它會將括號及其包含的所有內容轉換為字符串。 像{child.name}這樣刪除引號將引用子 object 的 name 屬性，就像您期望 JS 做的那樣。