React 中的选取框标签答案

【问题标题】：Marquee tag in ReactReact 中的选取框标签
【发布时间】：2022-03-07 07:44:07
【问题描述】：

如何使用选取框标签。它不支持 ReactJS 中的 html 标签。我试图导入 react-text-marquee 仍然样式不反映

public render(): React.ReactElement<IScrollTickerWebPartProps> {
        return ( 
           <div className={styles.panelStyle} >
             <br></br>
             <Marquee text="swetha">Test</Marquee>
             
             <br></br>
             
             <div className={styles.tableStyle} >  
                
                 {this.state.items.map(function(item,key){     
                   return (<div className={styles.rowStyle} key={key}> 
                       <div className={styles.CellStyle}>{item.Title}</div>   
                     </div>); 
                 })} 
                        
             </div> 
           </div> 
       ); 
     }

【问题讨论】：

<Marquee> html 标签没有内置 JSX 标签。与 JSX 相关的指定 html 标签在 react docs 中定义
JSX 支持绝大多数 HTML 标签：react-cn.github.io/react/docs/tags-and-attributes.html
哦，如何在jsX中使用它？
@tombraider 我无法在 JSX 中使用它。

标签： reactjs

【解决方案1】：

在 React Js 中，html marquee 标签有效。您不需要导入任何组件。

例子

public render(): React.ReactElement<IScrollTickerWebPartProps> {
        return ( 
           <div className={styles.panelStyle} >
             <br></br>
             <marquee style={{ color: 'red', fontSize: '3em' }}>Test</marquee>
             
             <br></br>
             
             <div className={styles.tableStyle} >  
                
                 {this.state.items.map(function(item,key){     
                   return (<div className={styles.rowStyle} key={key}> 
                       <div className={styles.CellStyle}>{item.Title}</div>   
                     </div>); 
                 })} 
                        
             </div> 
           </div> 
       ); 
     }

【讨论】：

【解决方案2】：

非常简单的修复；您在“Marquee”中使用了大写字母 M。因此，React 试图找到一个名为 Marquee 的组件但失败了。只需将其更改为一点m，移除你的道具，你就会变成金色的。

示例：https://jsfiddle.net/h9fyvpwj/2/

class Hello extends React.Component {
  render() {
    return (
        <marquee>Test</marquee>
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

请记住，marquee 标签现已过时，您应尽可能避免使用它：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee。

【讨论】：

我收到此错误。 “JSX.IntrinsicElements”类型上不存在属性“marquee”。
我正在尝试在 JSX 文件中添加这个我导入任何东西？
猜测这是一个 Typescript 错误。没错，JSX 不支持 marquee 作为内在元素。 React 仍然会渲染它，但它并没有正式支持它。你需要编辑你的 Typescript 以防止它出错。更好的是，完全删除 marquee 元素，因为它现在已经过时了。
可以使用纯CSS实现跑马灯效果：stackoverflow.com/questions/21233033/css3-marquee-effect

【解决方案3】：

您可以像这样使用 HTML marquee：

<marquee
    behavior='scroll'
    scrollamount='20'
    width='50%'
    direction='right'
    height='50px'
 >
    this is a news flash....
</marquee>

【讨论】：