标签: react-dom

为了改进 TTFB（第一个字节的时间），'PageSpeed Insights' 建议使用，ReactDOMServer.renderToNodeStream()但我不知道如何实现它。我阅读了rendertonodestream文章，但我不知道如何使用它。另外，我阅读了dev.to 文章，但在我的 next.js 应用程序中，没有 webpack.config.js 文件。如果我不能renderToNodeStream在 Next.js 中使用 react ，如何覆盖renderToNodeStreamNext.js 中的效果？

我在 React 中做了一个下拉切换。我的下拉菜单工作得很好。但是当我尝试在下拉菜单外部单击时关闭下拉菜单。它显示错误。我使用 ref 来查找容器元素。示例代码

class Search extends React.Component{
    constructor()
    {
        super()
        this.state={
            notificationStatus:false,
            isFocus:false


        }
        this.container=React.createRef()
    }
    toggleNotification=()=>
    {
        this.setState({notificationStatus:!this.state.notificationStatus});
    }

    componentDidMount() {
        document.addEventListener("mousedown", this.handleClickOutside);
      }
      componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClickOutside);
      }
      handleClickOutside = event => {
          if(this.container.current)
          {
        if (this.container.current && !this.container.current.contains(event.target)) {
          this.setState({
            notificationStatus: false,
          });
        }
    }
      };
    render()
    {
        const {isFocus,notificationStatus}=this.state;
        return(
            <div>
                    <div className="col-md-1 col-sm-1 bell-container flex all-center relative">
                        <img src={bell} onClick={this.toggleNotification} alt="bell icon" />
                    </div>
                {
                    notificationStatus ?  <NotificationList ref={this.container} /> : null
                    
                } …

学习 React 时遇到了一个场景，我想在 React.createElement() 中定义一个“img”标签。我尝试过以下语法，但我确信它是错误的方法：

function Greeting() {\n  return (\n    <div>\n      <Person />\n      <Message />\n    </div>\n  );\n}\n\nconst Person = () => {\n  <h2>Its an Image</h2>;\n\n  return React.createElement(\n    "img",\n    {},\n    "https://images-eu.ssl-images-amazon.com/images/I/81l3rZK4lnL._AC_UL200_SR200,200_.jpg"\n  );\n};\n

我得到的错误如下：

Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.\n\xe2\x96\xb6 15 stack frames were collapsed.\nModule.<anonymous>\nE:/REACT_APP/tutorial/src/index.js:43\n40 | return <p>Follow the white rabbit </p>;\n41 | };\n42 | \n> 43 | ReactDom.render(<Greeting />, document.getElementById("root"));\n44 | \n

请建议，

在测试库文档的某些页面上出现了使用 screen.getByText 的示例：

  expect(screen.getByText(/you are home/i)).toBeInTheDocument()

关联

我的问题是这与此有何不同：

  screen.getByText(/you are home/i)

为什么当 screen.getByText 执行相同操作时文档使用 .toBeInTheDocument() （当“you are home”文本不在文档中时抛出错误）？这不是多余的吗？

我不太确定这个问题是否有真正的答案，但我想知道通过使用在 React 应用程序中找到常规 DOM 元素是否更好

一种。参考文献和 ReactDOM.findDOMNode

或者

湾 普通的旧 document.getElementById

我有一个使用相同类并具有相同内容的多个元素.

所以我可以使用ReactDOM将它们渲染为1而不是:

ReactDOM.render(
    <Footer source="./data/nav.json"/>,
    document.getElementsByClassName('footer')[0] //mountNode
);

ReactDOM.render(
    <Footer source="./data/nav.json"/>,
    document.getElementsByClassName('footer')[1] //mountNode
);

ReactDOM.render(
    <Footer source="./data/nav.json"/>,
    document.getElementsByClassName('footer')[2] //mountNode
);

如果我能动态地做它会是最好的,因为我不知道这些多个相同的元素有多少.

可能吗？

编辑:

var elementLength = document.getElementsByClassName("footer").length;
if (elementLength > 0) {
    for (var i = 0; i < elementLength; i++) {
        ReactDOM.render(
            <Footer source="./data/nav.json"/>,
            document.getElementsByClassName('footer')[i] //mountNode
        );
    }
}

它会./data/nav.json多次调用.

Index.js：

import React from 'react'; 
import buttonsInstance from 'components/button-instance';
import {ReactDOM} from 'react-dom';

ReactDOM.render(buttonsInstance, document.getElementById('app'));

和button-instance.js：

import React from 'react';
import {ButtonToolbar} from 'react-bootstrap';
import {Button} from 'react-bootstrap';

const buttonsInstance = (
  <div>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="large">Large button</Button>
      <Button bsSize="large">Large button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary">Default button</Button>
      <Button>Default button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="small">Small button</Button>
      <Button bsSize="small">Small button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
      <Button bsSize="xsmall">Extra small button</Button>
    </ButtonToolbar>
  </div>
);

我正在尝试reactbootstrap从https://react-bootstrap.github.io/components.html使用。

然后我得到了错误：

Uncaught …

我的目标是创建一个表单，当您按回车键时，它会将您切换到下一个输入元素，并在您进行最后一个输入时提交表单。

这是为移动设备构建的，因为在浏览器中没有使用“下一步”按钮而不是“转到键盘”按钮的选项（有关此问题的更多信息，请参阅此答案）。

为了更好地形象化这一点，这里有一张图片：

我也写了一些代码，但这里的重点是我无法在正确的位置捕获事件，因此表单在返回后立即提交或当我阻止事件时，焦点在我点击后发生变化返回2次。

请参阅此处的示例：https : //codepen.io/ofhouse/pen/Rgwzxy（我也粘贴了下面的代码）

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this._onKeyPress = this._onKeyPress.bind(this);
  }

  componentDidMount() {
    if (this.props.focus) {
      this.textInput.focus();
    }
  }

  componentDidUpdate(nextProps) {
    if (nextProps.focus) {
      this.textInput.focus();
    }
  }

  _onKeyPress(e) {
    if (e.key === 'Enter') {
      this.props.onSubmit(e);
    }
  }

  render() {
    return (
      <div>
        <input
          type="text"
          onKeyPress={this._onKeyPress}
          ref={input => {
            this.textInput = input;
          }}
        />
      </div>
    );
  }
}

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state …

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

React 将匹配第一棵树，匹配第二棵树，然后插入第三棵树。

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

React 会改变每个子树，而不是意识到它可以保持 Duke和Villanova子树的完整。这种低效率可能是一个问题。

我很难理解他们所说的“React 会改变每个孩子”的意思。

这可以从他们的网站上找到：https : //reactjs.org/docs/reconciliation.html#recursing-on-children

我想使用refs功能来访问多个元素。然后，我可以遍历的元素this.tabs。下面的代码不起作用，如何对其进行修复？我现在使用的解决方案是document.querySelectorAll('tabs')，但它似乎不适用于React。

class Comp extends React.Component {
  constructor(props) {
    super(props);
    
    this.tabs = React.createRef();
  }
  
  componentDidMount() {
    console.log(this.tabs);
  }


  render() {
    return (
      <div>
        <span class="tab" ref={this.tabs}>One</span>
        <span class="tab" ref={this.tabs}>Two</span>
        <span class="tab" ref={this.tabs}>Three</span>
      </div>
    );
  }
}

ReactDOM.render(
  <Comp />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>