标签: react-dom

我有一个组件（EmailBuilder），它使用react context api来渲染一些东西，我想将其渲染为html，我尝试了这个：

import * as React from 'react'
import { EmailBuilder } from './EmailBuilder';
import ReactDOMServer from 'react-dom/server';

export const EmailBuilderPage = (props: any) => {
    const element = <EmailBuilder />
    return <>
        {element}

        <br />
        <h1>HTML</h1>
        {ReactDOMServer.renderToString(element)}
    </>
}

虽然渲染了元素的根，但它无法渲染上下文 api 对元素的任何更改。

这可能吗？

我正在尝试构建一个简单的示例项目，其中用户在单击按钮后会使用 React 重定向到“联系”页面。我试图通过设置状态属性的值来实现这一点。当我运行我的代码时，它确实将浏览器地址栏 URL 更改为联系页面的 URL，但似乎并未实际加载该组件 - 我得到的是一个空白页面。如果我手动导航到该 URL ( http://localhost:3000/contact )，我可以看到内容。

这是我的App.js和Contact.js文件 -

应用程序.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';
import Contact from './Contact';

class App extends Component {
    state = {
        redirect: false
    }

    setRedirect = () => {
        this.setState({
            redirect: true
        })
    }

    renderRedirect = () => {
        if (this.state.redirect) {
            return <Redirect to='/contact' />
        }
    }

    render() {
        return …

我一直在自学如何使用enzyme和测试 React 组件jest，但我对如何测试使用 React hooks 的已安装组件一无所知。

这是该组件的简化版本......

  const [records, setRecords] = useState([]);

  const onChange = async ({ value }) => {
    try {
      const request = await searchRecords();

      console.log("Before setRecords");

      setRecords(request.results);

      console.log("After setRecords");
    } catch (error) {  /* error handling */ }
  }

测试代码看起来像...

let wrapped;

describe("Sample", () => {
  beforeEach(() => {
    jest.clearAllMocks();
    wrapped = mount(
      <Provider store={createStore(reducers, {})}>
        <Sample />
      </Provider>
    );
    api.mockImplementation(() => ({ results: searchResult }));
  });

  afterEach(() => { …

我目前正在构建 React UI 组件包，该组件包将发布到 NPM。

我按照应有的方式将 React 和 ReactDOM 添加到对等依赖项中。然而，在我的库中，我依赖于类似的模块，react-dates也有 React 作为对等模块。

当我npm i在包内执行此操作时，我收到了很多这样的警告，这些警告污染了我的终端：

warning " > react-dates@21.2.0" has unmet peer dependency "react@^0.14 || ^15.5.4 || ^16.1.1".
warning " > react-dates@21.2.0" has unmet peer dependency "react-dom@^0.14 || ^15.5.4 || ^16.1.1".

作为一种解决方法，我决定还添加 React 和 ReactDOM devDependencies，警告就消失了。

dev您认为这是在和中重复依赖项的好方法吗peer？

我需要实现一个搜索按钮来搜索输入的值。我知道如何向按钮添加 onClick listener（这是名称吗？），以便它fires（是表达式？） 成为一个函数。

但在函数内，我不知道如何get输入值。

这是我得到的：

function App() {
  const [query, setQuery] = useState('')
  const [page, setPage] = useState(1)
  const { jobs, loading, error } = useFetchJobs(query, page)

  function handleSearch(e) {
    setQuery(???)
    setPage(1)
  }

  return (
    <Container className="my-4">
      <input type="text"></input>
      <button onClick={handleSearch}>search</button>    
    </Container>
  );
}

这是我尝试过的。我在google上找到的一行代码。我明白了Error: Function components cannot have string refs

function App() {
  function handleSearch(e) {

    setQuery(React.findDOMNode(this.refs.search).value.trim())
    setPage(1)
  }

  return (
    <Container className="my-4">
      <input type="text" ref="search" ></input>
      <button onClick={handleSearch}>search</button>
    </Container>
  );
}

我在使用“react-dom/server”中的renderToString在 SSR 上渲染某些 URL 时遇到一些错误

TypeError: Cannot read property 'length' of undefined\nat areHookInputsEqual (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:992:38)\nat Object.useMemo (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:1230:13)\nat useMemo (C:\\projects\\spd-web-app1\\node_modules\\react\\cjs\\react.development.js:1521:21)\nat Provider (C:\\projects\\spd-web-app1\\node_modules\\react-redux\\lib\\components\\Provider.js:22:41)\nat finishHooks (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:1077:16)\nat processChild (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:3046:14)\nat resolve (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:2962:5)\nat ReactDOMServerRenderer.render (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:3437:22)\nat ReactDOMServerRenderer.read (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:3375:29)\nat renderToString (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:3990:27)\n

{\n  memoizedState: 0,\n  queue: { last: null, dispatch: [Function: bound dispatchAction] },\n  next: {\n    memoizedState: { current: [QueryData] },\n    queue: null,\n    next: { memoizedState: [Object], queue: null, next: [Object] }\n  }\n}\n