标签: jsx

我通过 index.jsx 从“icons”文件夹中导入所有 SVG，如下所示：

索引.jsx：

export about from './about.svg';

这是导入：Button.jsx

import React from 'react';
import './MenuIcon.scss';
import * as IconID from './icons';

const Button = (props) => {
    return (
        <div className="menu-icon" >
            <div className={'menu-icon__icon-wrapper'}>
                <IconID.about /> // This works great
                <IconID['about'] /> // This does not work
            </div>
        </div>
    );
};

export default Button;

现在要获取特定的 Svg，例如我只需调用返回方法，一切正常。

现在我想加载不同的 SVG，例如：

const svgName = 'back';

return (<IconId['back'] />);

我怎样才能使这成为可能？

在下面的代码中，我尝试使用 event.preventDefault() 但它不起作用。我正在尝试解决一个问题：如果名称为空，则其不可单击。

      <Anchor onClick={(event) => { props.someMethod(prop1, event); }}>
        <div className="u-pt--sm">
          {prop1.title}
        </div>
    .....
 </Anchor>

  someMethod(prop1, event) {
    if (prop1.name === '') {
      event.preventDefault();
    }
   ....
  }

如果我调试代码，我会看到事件即将发生

[[Handler]]
:
Object
[[Target]]
:
SyntheticMouseEvent
[[IsRevoked]]
:
false

知道为什么它不起作用吗？

如果我的笔记应用程序能提供一些帮助，我将不胜感激。假设我的笔记列表中有 3 个笔记。我想删除列表顶部的注释。无论我尝试删除哪一个，总是首先删除列表最底部的注释。我检查了 React 控制台，应用程序组件状态中的注释数组表明它已正确删除。但从实际的角度来看，事实并非如此。我怎样才能得到它，以便删除我选择的确切注释？

    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {
                notes: [],
                title: "",
                details: ""
            }
            this.updateTitle = this.updateTitle.bind(this);
            this.updateDetails = this.updateDetails.bind(this);
            this.submitHandler = this.submitHandler.bind(this);
            this.deleteHandler = this.deleteHandler.bind(this);

        }

        updateTitle(event) {
            this.setState({ title: event.target.value });
        }

        updateDetails(event) {
            this.setState({ details: event.target.value });
        }

        submitHandler(e) {
            e.preventDefault();
            if (!this.state.title.length || !this.state.details.length) {
                return;
            }

            const newNote = {
                newTitle: this.state.title,
                newDetails: this.state.details
            }
            this.setState(prevState => ({
                notes: prevState.notes.concat(newNote),
                title: "",
                details: ""
            }))
        } …

  render(){

    let { classes } = this.props;

    let list = classes.map((item, index) => {
      return (
        <option >{item}</option>
      )
    })


    return(
      <div className="filter-bar">

        <form className="sort-form">
          <div className="classSelect">
            <span>select class</span>
              <select name="classSelect" onChange={this.handleClassChange}}>
                <option selected="selected"  >Please choose class</option>
                {list}
              </select>
          </div>
        </form>
      </div>
    )
  }
};

我想映射一个数组并使用每个元素作为选择下拉列表中的选项，并且还有一个额外的空白选项，该选项默认为单击下拉列表。

目前，我拥有的额外内容可在列表中使用，但默认值始终是数组中的第一个元素，而我希望默认值是“请选择您的班级”

有人可以解释一下吗？

这里我有三个过滤器，我需要选择三个过滤器来过滤表中的数据。我正在使用 if else 语句来检查和过滤数据，因此我想以某种模块化方式修改代码以实现相同的目的，任何人都可以建议我，我应该使用 switch case 吗？

  if (mapFilter === 'Mapped') {
    if (listFilter) {
      const result = fullData.filter(
        data =>
          data.partner_mapping_classification.length > 0 &&
          data.account === listFilter,
      );
      setFinalData(result);
    } else {
      const result = fullData.filter(
        data => data.partner_mapping_classification.length > 0,
      );
      setFinalData(result);
    }
  } else if (mapFilter === 'Not Mapped') {
    if (listFilter) {
      const result = fullData.filter(
        data =>
          data.partner_mapping_classification === '' &&
          data.account === listFilter,
      );
      setFinalData(result);
    } else {
      const result = fullData.filter(
        data => …

我有一个相当简单的 React 应用程序，当您打开应用程序时，它在第一个“页面”的顶部有一个循环视频。我与许多在线测试人员检查了整个应用程序，视频加载速度非常慢。

如此缓慢，它阻碍了应用程序获得任何 SEO 成功。该视频有 8.1 MB 大，质量很好，所以我不一定想失去一些质量。如何在 React 应用程序中缩短此类视频的加载时间？

视频.jsx

import React from 'react';
import './styles.scss';
import { Row, Col } from 'react-bootstrap';
import video from '../../media/video.mp4';

export default class Hero extends React.Component {
  render() {
    return (
      <div className="hero">
        <video
          className="desktop-video"
          resizemode={"cover"}
          style={{
            aspectRatio: 1,
            width: "100%",
          }} autoPlay muted loop>
          <source src={video} type='video/mp4' />
        </video>
      </div>
    );
  }
}

这是我的代码片段，我正在尝试从链接中删除文本装饰。

 <ul className="header__links">
              <Link to="/">
                <li>Home</li>
              </Link>
    </ul>

这是我已经尝试过的：

.header__links{
text-decoration: none;
}

我尝试过内联CSS：

<Link to="/" style={{textDecoration='none'}}>

然后我也尝试定位标签、ul 标签和 li 标签，但似乎都不起作用。请帮我解决一下。

注意：我知道这个问题以前曾被问过，但没有一个解决了我的问题，这就是我问这个问题的原因。

为什么在另一个功能组件中定义一个 React 功能组件会破坏 CSS 转换？

function Doohick({isOpen}: {isOpen: boolean}) {
    const style = {
        transition: 'opacity 2s ease',
        ...(isOpen ? {opacity: 1} : {opacity: 0})
    }

    return (
        <div style={style}>
            Doohick!!!
        </div>
    )
}

function Parent() {
   const [open, isOpen] = useState(false)
   return (
     <>
        <button onClick={() => setIsOpen(!isOpen)}>Toggle Doohick</button>
        <Doohick isOpen={isOpen} />
     </>
   )
}

如果我定义Doohick在 之外Parent，如上所述，一切都会很好。如果我将定义移到 内部Parent，而不进行其他更改，我的 CSS 转换就会中断。其他 CSS 属性都很好。

为什么在另一个功能组件中定义一个功能组件会破坏 CSS 转换？

我为什么要这样做的复杂解释

我听到你问：我为什么要这么做？我会告诉你，但请记住，你不需要知道任何这些来理解具体问题。

我想将Doohick状态封装在自定义挂钩中：

function useDoohick() { …

反应确实很新，我使用react-router-domuseLocation 钩子在 Navbar.js 中使用了这部分导航，我能够获得视图的活动路径，并且当用户使用类似的内容到达视图时我想渲染自定义JSX文本

if(path==="login" || path==="signin"){
  `<h1>welcome</h1> ${userName}!` 
}

如何检查是否满足条件 A 或 B，然后使用以下命令渲染适当的文本jsx

所以我知道发生了什么事，但我也不明白发生了什么事。我的意思是，我从 React 网站获得了下面的代码（见下面的代码），我正在经历理解 React 以及如何正确使用它的过程。所以我的问题是，为什么变量“firstName”和“lastName”在它们将使用的函数范围之外声明？在函数的作用域中声明变量不是更容易吗？

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);