React Styled Components - Wie auf Roh-HTML zugreifen

Question

Ich habe eine Referenz auf eine Komponente, die ich über eine styled component in meiner App konvertieren. Die Referenz wird verwendet, um auf die Eigenschaften offsetHeight und scrollHeight des Roh-HTML-Elements der Komponente zuzugreifen. Sobald ich diese Komponente in eine gestylte Komponente umgewandelt habe, zeigt der Verweis jetzt auf die formatierte Komponente anstelle des HTML-Rohelements und ich bin mir nicht sicher, wie ich auf das Basiselement verweisen soll. Kann das gemacht werden?

Beispiel:

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> 
    ); 
    } 
} 

Answer 1

Wenn Sie ref an eine formatierte Komponente übergeben, erhalten Sie eine Referenz auf den styled-components Wrapper, nicht den DOM-Knoten. Um einen Verweis auf den tatsächlichen DOM-Knoten zu erhalten, übergeben Sie die innerRef-Prop. (Siehe the docs)

Dies ist, was Sie tun müssen:

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> 
    ); 
    } 
} 

Answer 2

Ja, es kann getan werden. Sie können auf Roh-HTML mit ReactDOM.findDOMNode() zugreifen. Bedenken Sie jedoch, dass von dieser Methode abgeraten wird. Sie können mehr darüber in der referenzierten Seite lesen.