Question

在我的父组件中，我想这样做

import List from '../List'

export default class Example extends Component {
....
  <List>
    <List.Item>
      Author
    </List.Item>
  </List>
}

所以List.Item没有显式导入......

我得到了这个警告：

警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。

那么如何动态地允许像List这样的已定义组件中的子组件。

在列表中我正在使用

const listItems = React.Children.map(children, (child) => {
  if (React.isValidElement(child)) {
    console.log(child)
    return React.cloneElement(
      <ListItem />, child, child.props.children
    )
  }
  // return <ListItem {...child.props} />
})

呈现实际的ListItems组件

Answer 1

在List组件中，我可以用

实现我想要的代理

 List.Item = ''

导出默认列表

然后我可以导入List并使用

<List>
  <List.Item>...

反应复合组件

1 个答案: