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>;
  }
}

现在，在孩子中，我只想访问道具名称：

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

但其输出的名称为文字：名为{child.name}的孩子

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

Answer 1

宁可这样做

<Child name={child.name} />

Answer 2

您只需要在Parent组件的render函数中删除{child.name}周围的引号即可。像这样：

<Child name={child.name} />

说明： 在React中，类似HTML的代码实际上是React自己的模板语言JSX。在JSX中，您可以将一段代码括在方括号{}中，以将其解释为JavaScript。但是，由于"{child.name}"用这些双引号引起来，它将括号和它们包含的所有内容都变成一个字符串。像这样{child.name}删除引号将像您希望JS那样引用子对象的name属性。

React：Map Function内部的子道具

2 个答案: