模仿div中的textarea

Question

使用 React 我正在尝试构建一个用于突出显示文本的组件。

为了做到这一点，我在同一级别上有一个 textarea 元素和一个 div，将 textarea 的值复制到 div 中。我的代码如下。

textarea在TextArea组件内，div在HighlightedDiv组件内。

我刚刚发现 div 处理换行符和空格的方式与它们在 textarea 中的处理方式不同。因此，当我在 textarea 内输入多个空格时，div 只显示一个空格。当我在 textarea 中按 enter 时，div 中的文本保持在同一行。

在某处我发现将其添加到 div 的 css 样式中可以解决以下问题：

white-space: pre;

确实如此，但现在我还希望我的文本在碰到 div 的边框时继续换行，就像我使用以下 css 时一样：

white-space: normal;
word-wrap: break-word;

问题显然是我需要空白：pre 和空白：正常。也就是说，说得太清楚了，这是不可能的。

有谁知道实现我想要的另一种方法？

我的代码：

（我使用的是样式库，样式组件，所以下面的 StyledTextArea 和 Div 元素分别只是纯文本区域和 div。）

HighlightTextArea（父级）：

import React, { Component } from 'react'
import styled from 'styled-components'

import HighlightDiv from './HighlightDiv'
import TextArea from './TextArea'

const Container = styled.div`
  border: 1px green solid;
  width: 100vh;
  padding: 20px;
`


export default class HighlightTextArea extends Component {
  constructor() {
    super()
    this.state = {
      text: ''
    }
  }
  setHighlightTextAreaState = (newStateObject) => {
    for (let key in newStateObject) {
      this.setState({ [key]: newStateObject[key] })
    }
  }
  render() {
    return (
      <Container>
        <TextArea setHighlightTextAreaState={this.setHighlightTextAreaState}/>
        <HighlightDiv text={this.state.text}/>
      </Container>
    );
  }
}

TextArea（子）：

import React, { Component } from 'react'
import styled from 'styled-components'

const StyledTextArea = styled.textarea`
  border: 1px solid blue;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  color: blue;
  opacity: 0.5;
`

export default class TextArea extends Component {
  constructor(props) {
    super(props)
  }
  handleChange = (event) => {
    console.log("TextArea.handleChange - event.target.value:")
    console.log("\"" + event.target.value + "\"")
    console.log("TextArea.handleChange - event.target.value.length: " + event.target.value.length)
    this.props.setHighlightTextAreaState({
      text: event.target.value,
    })
  }
  // componentDidMount() {
  //   let textAreaRect = document.getElementById("text-area").getBoundingClientRect()
  //
  // }
  render() {
    return (
      <StyledTextArea id="text-area" onChange={this.handleChange}></StyledTextArea>
    );
  }
}

HighlightDiv（子级）：

import React, { Component } from 'react'
import styled from 'styled-components'

const Div = styled.div`
  border: 1px solid red;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: red;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
`


export default class HighlightDiv extends Component {
  constructor(props) {
    super(props)
  }
  renderTextHtml = () => {
    // Loop over all characters in this.props.text
    // Check if character is space or enter
  }
  render() {
    return (
      <Div>
        {this.props.text}
      </Div>
    )
  }
}

Answer 1

你应该使用white-space: pre-wrap;

堆栈 sn-p - 并排 div/textarea

div {
  white-space: pre-wrap;
}


/* for the purpose of this demo */
div, textarea {
  display: inline-block;
  vertical-align: top;
  width: 220px;
  height: 220px;
  font-size: 16px;
  font-family: arial;
  overflow: hidden;
}

<div>But ere she from the church-door stepped She smiled and told us why:
  
    'It was a wicked woman's curse,' Quoth she, 'and what care I?'
     
She smiled, and smiled, and passed it off Ere from the door she stept
</div>

<textarea>But ere she from the church-door stepped She smiled and told us why:
  
    'It was a wicked woman's curse,' Quoth she, 'and what care I?'
     
She smiled, and smiled, and passed it off Ere from the door she stept
</textarea>