javascript - 是否可以添加 props.children 的 ref 没有 ref

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 或克隆然后添加 ref 这个解决方案对我来说是好的

有什么提示吗？

Answer 1

我建议查看 styled-components并制作一个可以带 Prop 的样式 p 。这样您就可以使用条件更改样式。

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