Question

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

为此，我在同一级别上有一个textarea元素和一个div，将textarea的值复制到div中。我的代码在下面。

textarea位于TextArea组件内，而div位于HighlightedDiv组件内。

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

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

white-space: pre;

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

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

显然，问题是我同时需要空白：pre和空白：normal。太清楚了，这是不可能的。

有人知道我想要的另一种方式吗？

我的代码：

（我使用的是样式库，样式化组件，因此下面的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;

堆栈片段-并排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>

模仿div中的textarea

1 个答案: