Javascript div中的模拟文本区域

使用React，我试图构建一个用于突出显示文本的组件

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

textarea位于textarea组件内，div位于HighlightedDiv组件内

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

在某个地方，我发现将此添加到div的css样式中可以修复以下问题：

white-space: pre;

确实如此，但现在我还希望文本在到达div边界时保持换行，就像我使用以下css时一样：

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

问题是，很明显，我既需要空白：pre，也需要空白：normal。说得太清楚了，这是不可能的

有人知道另一种方法来达到我想要的吗

我的代码：

（我使用的是s样式库、样式化组件，因此下面的StyledTextArea和Div元素分别是纯文本区域和Div。）

HighlightTextArea（父级）：

import React，{Component}来自“React”
从“样式化组件”导入样式化
从“./HighlightDiv”导入HighlightDiv
从“./TextArea”导入TextArea
const Container=styled.div`
边框：1px绿色实心；
宽度：100vh；
填充：20px；
`
导出默认类HighlightTextArea扩展组件{
构造函数（）{
超级（）
此.state={
文本：“”
}
}
setHighlightTextAreaState=（newStateObject）=>{
for（让输入newStateObject）{
this.setState（{[key]：newStateObject[key]}）
}
}
render（）{
返回(
);
}
}

文本区域（子项）：

import React，{Component}来自“React”
从“样式化组件”导入样式化
const StyledTextArea=styled.textarea`
边框：1px纯蓝色；
字体系列：“Incolata”，单空格；
字号：1rem；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
位置：绝对位置；
排名：0；
左：0；
z指数：20；
颜色：蓝色；
不透明度：0.5；
`
导出默认类TextArea扩展组件{
建造师（道具）{
超级（道具）
}
handleChange=（事件）=>{
log（“TextArea.handleChange-event.target.value:”）
console.log（“\”“+event.target.value+”\“”）
log（“TextArea.handleChange-event.target.value.length:+event.target.value.length”）
this.props.setHighlightTextAreaState({
文本：event.target.value，
})
}
//componentDidMount（）{
//让textAreaRect=document.getElementById（“文本区域”）.getBoundingClientRect（）
//
// }
render（）{
返回(
);
}
}

HighlightDiv（儿童）：

import React，{Component}来自“React”
从“样式化组件”导入样式化
const Div=styled.Div`
边框：1px纯红；
字体系列：“Incolata”，单空格；
字号：1rem；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
位置：绝对位置；
排名：0；
左：0；
z指数：10；
颜色：红色；
文本对齐：左对齐；
空白：正常；
单词包装：打断单词；
`
导出默认类HighlightDiv扩展组件{
建造师（道具）{
超级（道具）
}
renderTextHtml=（）=>{
//循环此.props.text中的所有字符
//检查字符是否为空格或enter
}
render（）{
返回(
{this.props.text}
)
}
}

您应该使用

空白：预包装

堆栈代码段-并排
div
/
textarea


div{
空白：预包装；
}
/*在本演示中*/
文本区分区{
显示：内联块；
垂直对齐：顶部；
宽度：220px；
高度：220px；
字体大小：16px；
字体系列：arial；
溢出：隐藏；
}
但在她走出教堂门之前，她微笑着告诉我们为什么：
“这是一个邪恶女人的诅咒，”她说，“我在乎什么？”
她笑了，笑了，还没走出门就把它传了出去
但在她走出教堂门之前，她微笑着告诉我们为什么：
“这是一个邪恶女人的诅咒，”她说，“我在乎什么？”
她笑了，笑了，还没走出门就把它传了出去
您应该使用
空白：预包装

堆栈代码段-并排
div
/
textarea


div{
空白：预包装；
}
/*在本演示中*/
文本区分区{
显示：内联块；
垂直对齐：顶部；
宽度：220px；
高度：220px；
字体大小：16px；
字体系列：arial；
溢出：隐藏；
}
但在她走出教堂门之前，她微笑着告诉我们为什么：
“这是一个邪恶女人的诅咒，”她说，“我在乎什么？”
她笑了，笑了，还没走出门就把它传了出去
但在她走出教堂门之前，她微笑着告诉我们为什么：
“这是一个邪恶女人的诅咒，”她说，“我在乎什么？”
她笑了，笑了，还没走出门就把它传了出去
太好了，太快了，但还不能选择您的回答作为我问题的答案。必须等大约十分钟。@RikSchoonbeek不慌不忙：）太好了，太快了，但我还不能选择你的回答作为我问题的答案。必须等大约十分钟。@RikSchoonbeek不着急：）
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>
    );
  }
}

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

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