我怎么能不通过 children 作为道具。相反，在 React 的开始和结束标签之间嵌套 children？

Question

错误说：不要将 children 作为道具传递。相反，当我添加这部分“children={}”

时，在开始和结束标记之间嵌套 children

我不熟悉反应和脉轮，所以有人可以帮助解决这个问题吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<Stack id='phone'>
  <InputGroup>
    <InputLeftElement pointerEvents='none' children={<PhoneIcon color='gray.300' />} />
    <Input
      type='tel'
      name={`${type}[phone]`}
      autoComplete='phone'
      value={Phone}
      placeholder='Numero de telephone'
      className='chakra-input'
    />
  </InputGroup>
</Stack>

Answer 1

我相信你需要改变这个:

<InputLeftElement pointerEvents='none' children={<PhoneIcon color='gray.300' />} />

给这个

<InputLeftElement pointerEvents='none'>
  <PhoneIcon color='gray.300' />
</InputLeftElement>

Answer 2

您传递给 'children' 道具的数据应该在数组中。 (children={[]})

所以你需要改变这一行

 <InputLeftElement pointerEvents='none' children={<PhoneIcon color='gray.300' />} 
/>

至此

<InputLeftElement pointerEvents='none' children={[<PhoneIcon color='gray.300' 
/>]} />

我怎么能不通过 children 作为道具。相反，在 React 的开始和结束标签之间嵌套 children？

How can I not pass children as props. Instead, nest children between the opening and closing tags on React?

reactjs

chakra-ui