Question

我有新的反应。我正在尝试为react中的组件创建以下结构：

<Sidebar>
  <Box>
    <Title/>
    <Item/>
    <Item/>
  </Box>
  <Box>
    <Title/>
    <Switch/>
  </Box>
</Sidebar>

我可以在Box组件中包含Title组件，并通过props传递每个标题值。如何在第一个Box组件中包含Item组件而不是第二个？

将Item和Switch组件作为道具传递给Box组件的最佳方法是什么？

Answer 1

有很多方法可以做你所要求的事情，实际上这取决于你的计划目标。

多种Box组件（名称不同）
将所有子组件包裹在div中，并将该div传递给Box的'children'道具。（稍微更改您的层次结构）。

实施例

<Box children={<div><Title/><Item/><Item/></div>}/>
<Box children={<div><Title/><Item/></div>}/>

层次

<Sidebar>
  <Box>
    <div>
      <Title/>
      <Item/>
      <Item/>
    </div>
  </Box>
  <Box>
    <div>
      <Title/>
      <Switch/>
    </div>
  </Box>
</Sidebar>

更加花哨，从作为prop传递的数组或其他JS对象构建子组件，并在'Box'中有一个函数，用于读取该数组并构建子组件。

Answer 2

利用特殊的children道具来渲染任意的孩子：

children是隐式传递给每个组件的默认道具
此children道具会自动填充父组件
而不是使用props.children，您可以解构props并使用({ children(, ...otherProps) })代替

行动中：

Box.js

const Box = ({ children }) => (
  <div className='box'>
    {children}
  </div>
)

Sidebar.js

const Sidebar = ({ children }) => (
  <div className='sidebar'>
    {children}
  </div>
)

App.js

import React from 'react'

import Sidebar from './path/to/Sidebar'
import Box from './path/to/Box'

class App extends React.Component {
  constructor() {
    super()
    // state or whatever
  }

  render() {
    return (
      <Sidebar>
        <Box>
          {/* 
            Anything you put in here (other components 
            included) will be automatically rendered
          */}
        </Box>
        <Box>
          {/* Same here */}
        </Box>
      </Sidebar>
    )
  }
}

如何将不同的子组件添加到组件

2 个答案: