React Styled Components - 如何访问原始html

我在我的应用程序中将组件转换为styled component。 ref用于访问组件的原始html元素上的offsetHeight和scrollHeight属性。一旦我将这个组件切换到一个样式化的组件，ref现在指向样式化的组件，而不是原始的html元素，并且我不确定如何引用基本元素。这可以做到吗？React Styled Components - 如何访问原始html

例如：

const TextArea = styled.textarea` 
    display: block; 
    margin: 0 0 0 18%; 
    padding: 4px 6px; 
    width: 64%; 
    font-size: 1rem; 
    color: #111;`; 

export default class Input extends Component { 
    componentDidMount() { 
    const height = this.textInput.scrollHeight; 
    // do something.... 
    } 
    render() { 
    return (
     <div> 
     <TextArea 
      ref={(input) => this.textInput = input} 
     ></TextArea> 
     </div> 
    ); 
    } 
}

来源

2017-03-01 bgmaster

将ref传递给一个样式化的组件会给你一个styled-components包装的参考，而不是DOM节点。要获得实际的DOM节点，请通过innerRef支持。（见the docs）

这就是你需要做什么：

const TextArea = styled.textarea``; 

export default class Input extends Component { 
    componentDidMount() { 
    const height = this.textInput.scrollHeight; 
    // do something.... 
    } 
    render() { 
    return (
     <div> 
     <TextArea 
      innerRef={(input) => this.textInput = input} 
     ></TextArea> 
     </div> 
    ); 
    } 
}

来源

2017-03-01 13:28:35 mxstbr

是的，这是我正在寻找的。谢谢！ – bgmaster

非常欢迎！ – mxstbr

是的，它可以做到的。您可以使用ReactDOM.findDOMNode()访问原始html。但是，请记住，不鼓励使用此方法。您可以在参考页面阅读更多关于此的内容。

来源

2017-03-01 11:40:04

感谢。我感觉这个API已经被弃用了。情况并非如此吗？ – bgmaster

我不确定，但文档中没有提及。你有参考吗？ –

我会看看我是否能找到它并回复你。我记得有人说，它是不鼓励的，正如你所提到的那样。 – bgmaster

React Styled Components - 如何访问原始html

回答

相关问题