Question

这里有个例子……

App.js

<Wrapper>
        <p ref={React.createRef()}>{state.result2}</p>
        <p>{state.result2}</p>
        <p>{state.result3}</p>
        <p>{state.result4}</p>
</Wrapper>

Wrapper.js

{props.children.map((child, idx) => (
        <ChildItem
          key={idx}
          {...props}
          child={child}
        ></ChildItem>
))}

 {props.children}

并且能够使用 element ref 在 ChildItem.js 中执行一些逻辑，而无需将其传递到App.js中的每个元素中。

EX，我想在进行逻辑检查后更改任何元素的背景因此，我可以更改props.child.ref.current.style.background = '#fff';

注意：我不想添加来自App.js

的任何引用

如果有任何方法可以操作props.children或克隆对象，然后添加引用，那么此解决方案对我来说是可以的

有任何提示吗？

Answer 1

我建议您检出styled-components并制作样式可以p的道具。这样，您可以使用条件来更改样式。

const Paragraph = styled.p`
  background-color: ${props => props.someVar === 'someValue' ? '#fff' : '#000'};
`

Answer 2

也许这对您有用：

import React, { Component } from 'react'

export class Wrapper extends Component {
  render () {
    const { children } = this.props
    const childrenWithRefs = React.Children.map(children, child => {
      // use child.props here ...

      return React.cloneElement(child, { ref: React.createRef() })
    })

    return (
      <div>
        {childrenWithRefs}
      </div>
    )
  }
}

export default Wrapper

是否可以添加props.children没有参考

2 个答案: