时间戳

首页 > 解决方案 > 将单词列表呈现为

React js 中的标签

javascript - 将单词列表呈现为

React js 中的标签

问题描述

我有一个单词列表：

document    [ paragraph [w1, w2, w3 ] , [w4, w5, w6] , [w7, ...], ... ]

我想用双列表渲染在 React Js 中渲染它们：

一个组件用 map()<Document>渲染列表。<Pargraph>使用map()<Pargraph>渲染列表 。<Word>

我的问题是，当我的时间太长时<paragraph>，文字会出现在屏幕之外。我想在单词之间插入一个<br>，但它不适用。最终生成的渲染 html 是：

<div>  # my Document
  <p> # my paragraph
    <span> <span> <span> ... <br/> <span> <span>
  </p>
  <p>
    ...
  </p>
</div>

问题是这</br>不适用，这可能是包装单词的正确标签？

这里有一张照片 => 溢出渲染

更新

这里是渲染这个的反应代码：

文档 => 段落

export default class Document extends React.Component<
  DocumentProps,
  DocumentState
> {
  constructor(props: Readonly<DocumentProps>) {
    super(props);
  }

  render = () => {
    return (
      <div id="documentContainer">
        {this.props.document.pargraphs.map((paragraph, index) => {
          return (
            <Paragraph
              key={index}
            ></Paragraph>
          );
        })}
      </div>
    );
  };
}

段落 => 单词 [ 这里<br />]

export default class Paragraph extends React.Component<ParagraphProps, ParagraphState> {
  constructor(props: Readonly<ParagraphProps>) {
    super(props);
  }

  render = () => {
    return (
      <p className="rowContainer">
        {this.props.text.map((word, index) => {
          console.log(index);
          if (index === 10) return <br />;
          return <Word word={word} key={index}></Word>;
        })}
      </p>
    );
  };

单词：

export default class Word extends React.Component<WordProps> {
  constructor(props: Readonly<WordProps>) {
    super(props);
  }

  render = () => {
    return <span className="word">{this.props.word}</span>;
  };
}

文档有 flex css: column-container

标签： javascripthtmlreactjsrenderingoverflow

解决方案

这绝对是一个CSS问题React。您是否尝试将 a 设置maxWidth为您的p组件100%？或者，也许您可​​以检查元素的display属性，span我认为在前面的检查器可以很快解决。

推荐阅读