Javascript 将组件与两组子组件进行反应
我正在创建一个组件,它需要包含两组子组件,并放置在组件的两个不同部分中Javascript 将组件与两组子组件进行反应,javascript,reactjs,children,Javascript,Reactjs,Children,我正在创建一个组件,它需要包含两组子组件,并放置在组件的两个不同部分中 let CreditCardForm = ({icons, fields}) => ( <div> <div className='some'> <div className='special'> <div className='nesting'> {icons} </div>
let CreditCardForm = ({icons, fields}) => (
<div>
<div className='some'>
<div className='special'>
<div className='nesting'>
{icons}
</div>
</div>
</div>
{fields}
</div>
)
let CreditCardFormUsage = () => {
let icons = () => (
<Icons>
<IconBogus/>
<IconVisa/>
<IconPaypal/>
<IconMore/>
</Icons>
)
let fields = () => (
<CreditCardFields>
<FieldCardNumber/>
<FieldName/>
<FieldExpirey/>
<FieldCCV/>
</CreditCardFields>
)
return (
<CreditCardForm icons={icons} fields={fields}/>
)
}
let CreditCardForm=({图标,字段})=>(
{图标}
{fields}
)
让CreditCardFormUsage=()=>{
让图标=()=>(
)
让字段=()=>(
)
返回(
)
}
上面的代码应该可以工作,我的问题是,是否可以基于元素本身中的子元素获取这些属性值,并获得更自然的属性值
<CreditCardForm>
<Icons>
<IconBogus/>
<IconVisa/>
<IconPaypal/>
<IconMore/>
</Icons>
<CreditCardFields>
<FieldCardNumber/>
<FieldName/>
<FieldExpirey/>
<FieldCCV/>
</CreditCardFields>
</CreditCardForm>
是的,你可以用儿童道具来做。阅读更多@docs: 当然,检查一下反应。孩子们
是,
this.props.children
将返回一个数组,因此如果您总是想加载特定的子级,那么只需在包装器中按索引引用这些子级即可。然后您可以将图标
和字段
转换为包装器组件。这是一张工作票。查看App
的render
方法如何完全符合您的要求
CreditCardForm渲染:
<div>
<div className='some'>
<div className='special'>
<div className='nesting'>
{this.props.children[0]}
</div>
</div>
</div>
{this.props.children[1]}
</div>
{this.props.children[0]}
{this.props.children[1]}
字段和图标渲染:
<div>{this.props.children}</div>
{this.props.children}
应用程序渲染:
<CreditCardForm>
<Icons>
<IconBogus />
</Icons>
<Fields>
<FieldCardNumber />
<FieldName />
</Fields>
</CreditCardForm>
我之前在儿童道具中挖掘,并通过组件名称搜索特定的儿童,这让我很为难。这是唯一的办法吗?性能成本是多少?据我所知,文档中只提到了一个,所以是的。我不介意性能,在大多数情况下,它的速度足够快,不会被注意到,如果您遇到问题,请尝试缓存内容,而不是在每次状态更改时重新呈现完整视图。这可能会有所帮助:如果谈论速度,检查不可变数据,这会使复杂数据集的比较速度大大加快。与纯渲染混合配合使用效果很好,使用immutable时更清楚什么是什么。我认为代码清晰是一件大事。您是否能够从我们的答案中实现您想要的,或者您是否正在寻找不同的解决方案?