我有一个输入，在用户插入文本后我想在 中的按钮中显示每个单词button-group。我拆分了句子并映射了返回的内容
<input .....><button onClick=....>
所以我在输入中插入文本，单击按钮后一切text.split(" ")
正常，直到这里。但在按钮组部分没有显示任何内容
<div className="btn-group" role="group" aria-label="...">
{this.mapArrayToButtons()}
</div>
mapArrayToButtons(){
this.state.textArr.map((word)=>{
console.log('the word: ',word);
return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
}
我textArr.length逐字查看控制台日志时间。但没有呈现任何按钮，浏览器中也没有显示任何内容。
我目前正在创建一个网站，并且一直在寻求开始使用renderToNodeStream来提高服务器端渲染的性能，而不是使用renderToString.
目前我正在使用renderToString然后使用Helmet.renderStatic从每个页面获取所有必需的元数据和标题。renderToNodeStream但是，当我切换到使用时，我将在渲染任何内容之前写入头部，因此无法再使用Helmet.renderStatic。
我想我可以做以下来解决这个问题，但这涉及先使用renderToString然后使用renderToNodeStream，并且可能并没有真正提供太大的改进......
app.use('*', (req, res) {
Loadable.preloadAll().then(() => {
const store = createStore(
reducers,
getDefaultStateFromProps(),
applyMiddleware(thunk)
);
const routeContext = {};
const router = (
<Provider store={store}>
<StaticRouter location={req.url} context={routeContext}>
<App/>
</StaticRouter>
</Provider>
);
res.setHeader('Content-Type', 'text/html');
renderToString(router);
const helmet = Helmet.renderStatic();
res.locals.title = helmet.title;
res.locals.meta = helmet.meta;
res.locals.link = helmet.link;
res.write(headTemplate(res.locals));
const stream = renderToNodeStream(router);
stream.pipe(res, { end: false });
stream.on('end', () => …新手在这里反应一下。
TLDR：我有一个名为的辅助函数，createNotification调用该函数时会使用 render() 将<ToastNotification />组件插入到container元素中。如果我使用 createPortal() 则不会附加任何内容。如果我使用渲染，尽管有多个触发器，但该组件仅添加一次。
谁能帮我弄清楚发生了什么事吗？
谢谢
助手.js
import { ToastNotification } from "carbon-components-react";
import { render, createPortal } from "react-dom";
export const createNotification = () => {
const container = document.getElementById("notificationContainer");
console.log(container); //just to check function is running and has found container
return render(<ToastNotification />, container); //works but only once, not on multiple triggers
return createPortal(<ToastNotification />, container); //doesn't render anything in container
};
上面的函数是根据需要从其他组件调用的：
登录.js
import { createNotification } from …我是React和Webpack的新手.我正在设置我的第一个项目,当我尝试运行webpack-dev-server时,我的代码无法编译!
更新
以下答案是正确的.我需要添加'react'到babel加载器预设.您可以在此处查看项目的完整来源:https://github.com/cleechtech/redux-todo
错误:
$ webpack-dev-server
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./dist
Hash: d437a155a1da4cdfeeeb
Version: webpack 1.12.14
Time: 5938ms
Asset Size Chunks Chunk Names
bundle.js 1.51 kB 0 [emitted] main
chunk {0} bundle.js (main) 28 bytes [rendered]
[0] multi main 28 bytes {0} [built] [1 error]
ERROR in ./src/index.js
Module build failed: SyntaxError: /Users/connorleech/Projects/redux-todo/src/index.js: Unexpected token (7:16)
console.log(ReactDOM);
ReactDOM.render(<App />,document.getElementById('root'));
SRC/index.js:
var react = require('react');
var ReactDOM = require('react-dom'); …我对测试环境很新,比如mocha和chai,我想通过以下在线教程进行练习,但似乎它不喜欢我的工作并给我一个错误说:
global.document = _jsdom2.default.jsdom('<!doctype html><html><body></body></html>');
^
TypeError: _jsdom2.default.jsdom is not a function
我的test_helper样子,
import jsdom from 'jsdom';
import jquery from 'jquery';
import TestUtils from 'react-dom/test-utils';
import ReactDOM from 'react-dom';
import chai, { expect } from 'chai';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from '../src/reducers';
import chaiJquery from 'chai-jquery';
// Set up testing environment to run like a browser in the command line
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>'); …在简单的井字游戏中，当有人获胜时，突出显示导致获胜的三个方格。
<p data-height="265" data-theme-id="0" data-slug-hash="PQyERJ" data-default-tab="js,result" data-user="akshgods" data-embed-version="2" data-pen-title="Simple tic tac game" class="codepen">See the Pen <a href="https://codepen.io/akshgods/pen/PQyERJ/">Simple tic tac game</a> by ganesh (<a href="https://codepen.io/akshgods">@akshgods</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>在这支笔中，您可以在控制台中看到如果您获胜，就会记录获胜指数。有人可以更新代码并解释一下吗？
我对一个反应应用程序有一个奇怪的用例,我想根据我们安装反应应用程序的元素上的参数为应用程序提供根URL.
ReactDOM.render(<MyGoodApp />, document.getElementById('root'));
我在HTML DOM中的位置
<div id="root" data-param="https://website.biz/api/"></div>
我无法在涵盖此案例的文档中找到任何内容.由于业务限制,我在部署此应用程序时受到限制,因此需要以这种方式或尽可能以类似的方式传递值.价值将是动态的.
我正在开发一个 React 应用程序。有一些包含 HTML 标签的动态内容。当我在页面上显示该内容时，它显示的是原始 HTML 标记。
比如说：
const msg = "Some <strong>text</strong> here"
我想说明这样的页面上的一些文字在这里
如果我使用，dangerousHtml那么它会像这样显示，没有粗体“这里有一些文字”
有人可以帮忙吗？
提前致谢！
我无法在下面的代码笔中弄清楚回调函数的逻辑。
按原样，当用户在输入字段中输入值时，列表将被过滤。如果过滤器被删除，我不知道如何将列表重新带回。
https://codepen.io/benszucs/pen/BPqMwL?editors=0010
class Application extends React.Component {
state = {
options: ['Apple', 'Banana', 'Pear', 'Mango', 'Melon', 'Kiwi']
}
handleFilter = (newFilter) => {
if (newFilter !== "") {
this.setState(() => ({
options: this.state.options.filter(option => option.toLowerCase().includes(newFilter.toLowerCase()))
}));
}
};
render() {
return (
<div>
<Filter handleFilter={this.handleFilter} />
{this.state.options.map((option) => <p>{option}</p>)}
</div>
);
};
}
const Filter = (props) => (
<div>
<input name="filter" onChange={(e) => {
props.handleFilter(e.target.value);
}}/>
</div>
);
ReactDOM.render(<Application />, document.getElementById('app'));
升级之后react，react-dom和nextjs这个错误发生的情况：
发生构建错误/home/lenovo/.../node_modules/antd/lib/style/index.css:7 body {^
语法错误：意外令牌{位于Module._compile（internal / modules / cjs / loader.js：720：22）
在Object.Module._extensions..js（internal / modules / cjs / loader.js：788：10）在Module.load（internal / modules / cjs / loader.js：643：32）{type：'SyntaxError'， '$ error'：'$ error'} events.js：180 throw er; //未处理的'错误'事件^错误：在processTicksAndRejections（内部/process/task_queues.js:77:11）上写入EPIPE ... internal / process / task_queues.js：75：11）{errno：'EPIPE'，代码：'EPIPE'，syscall：'write'}错误命令失败，退出代码为1。info访问https://yarnpkg.com/en / docs / cli / run有关此命令的文档。
这是我的next.config.js：
const nextConfig = {
distDir: '_next',
onDemandEntries: {
maxInactiveAge: 1000 * 60 * 60,
pagesBufferLength: 5,
},
webpack: (config, { dev }) => {
!dev && …react-dom ×10
reactjs ×9
javascript ×4
ecmascript-6 ×2
antd ×1
callback ×1
filter ×1
html ×1
jquery ×1
jsdom ×1
next.js ×1
react-helmet ×1
react-redux ×1
redux ×1
webpack ×1