Question

假设我有一个组件'App'，它将'Item'组件存储在其状态'itemList'中，如下所示：

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      itemList: [
        <Item />,
        <Item />,
        <Item />
    	]
    };
  }

  render() {
    return (
      {this.state.itemList}
    );
  }
}

class Item extends Component {
  
  render() {
    return (
      <div className="items">
      </div>
    );
  }
}

我是ReactJS的新手代码有效，它成功呈现了3个div'Item'组件，但是我想知道这种方法是否合法，如果没有，我该如何实现呢？

Answer 1

你可以这样做，但是只存储你需要的数据而不是组件的输出更有意义

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemList: [
        "Item one",
        "Item two",
        "Item three",
      ]
    };
  }

  render() {
    return (
      {this.state.itemList.map(item => <Item item={item} />)}
    );
  }
}

class Item extends Component {
  render() {
    return (
      <div className="items">
        {this.props.item}
      </div>
    );
  }
}

Answer 2

将组件存储在状态并不是一个好方法。将它们从状态中删除，然后在render方法

中渲染它们

  render() {
    return (
      <div>
         <item>
         <item>
         <item>
      </div>
    );
  }

ps：您必须使用div包装您的子组件。 render应返回单根DOM节点

Answer 3

为什么不写函数render()。国家应该是商店价值。

可以将React组件存储在父级状态中吗？

3 个答案: