Question

路由器（Director）在父组件上调用Render，如下所示：

$_POST['description']

Child1看起来像这样：

export class Parent extends React.Component {
  constructor(props) {
    super(props);
  } 


  render () {
    return <div className="content-section">
      <div className="content-header">Parent</div>
      <Child1 />
    </div>
  }
}

然后下拉组件如下所示：

export class Child1 extends React.Component {
  constructor(props) {
    super(props);
  } 
  render() {
    let items = ['One', 'Two', 'Three'];
    console.log('ITEMS', items);
    return <div className="content-section">
      <Dropdown title="Test Title" items={items} />
    </div>;
  }
}

在控制台中，它正确打印ITEMS一次，然后PROPS两次，第一次正确，第二次未定义。显然这对我来说是一个错误，好像它未定义forEach爆炸了。我不明白我做错了什么，因为我只是想把一个数组从父母传给孩子。

Answer 1

你在下拉列表中尝试渲染下拉列表

class Dropdown extends React.Component {

      constructor(props) {
        super(props);
      } 

      render() {
         console.log('props', this.props.items);
         let items = [];
         this.props.items.forEach(item => items.push(<MenuItem key={item.id}>{item}</MenuItem>));
         return <div>
           ------------- HERE!!!!
           <Dropdown title={this.props.title}>
           {items}
           </Dropdown>
         </div>
      }
   }

看看这个工作示例。我创建了JSFiddle

反应渲染称为两次，道具未定义为秒

1 个答案: