标签: react-dom
React,Babel,Webpack没有解析jsx,意外的令牌错误
我正在尝试构建我的应用程序wepback并遇到此unexpected token错误.我的项目的所有依赖项都很好,并且最新我在其他地方使用相同的项目并且它正在构建正常但是当我尝试构建我的当前代码时,它给出了错误,下面是config.js和错误描述
这是我的app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Router} from 'react-router';
import Routes from '../routes/routes';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { browserHistory } from 'react-router';
require('../Config');
injectTapEventPlugin();
window.EventEmitter = {
_events: {},
dispatch: function (event, data, returnFirstResult) {
if (!this._events[event]) return;
for (var i = 0; i < this._events[event].length; i++)
{
if(this._events[event][i])
{
var r = this._events[event][i](data);
if(returnFirstResult)
return r;
}
}
},
subscribe: function (event, callback, onlyOne) {
if (!this._events[event] || …推荐指数
解决办法
查看次数
React AppendChild 组件不起作用
我一直在到处寻找，但找不到解决方案。
我只是想做到以下几点：
import ComponentOne from '../components/component-one'
import ComponentTwo from '../components/component-two'
class Home extends Component {
constructor( props ) {
// So I can dynamically call a Component, found no other way
this.components = {
ComponentOne: <ComponentOne />,
ComponentTwo: <ComponentTwo />
}
}
[...code removed for brevity...]
_appendStep( step ) {
var component = React.cloneElement(this.components[step])
this.steps.appendChild( component )
}
}
这对我来说似乎很简单。我有
<div className="recipe-steps" ref={(ref) => this.steps = ref}></div>
我也需要动态appendChild组件。问题是，我附加到此的“步骤”<div>绝对需要是我创建的组件之一，需要允许我添加多个组件子级，甚至复制（这就是我使用的原因React.cloneElement()）组件。
一旦我附加了所有“步骤”，稍后的过程将解析每个步骤以确定如何运行配方。
以下工作正常，但我不需要创建一个简单的 DOM 节点，我需要使用我已经构建并附加的组件
var basicElement …推荐指数
解决办法
查看次数
ReactDom没有定义？
我正在尝试在reactjs中编写一个基本程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
上面的程序运行正常.但是当我将脚本文件中的内容移动到单独的app.jsx文件时,它会显示未定义reactDom的错误.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="app.jsx">
</script>
</body>
</html>
我的app.jsx看起来像:
ReactDom.render(
<h1>Hello React!!!</h1>,
document.getElementById('example')
)
推荐指数
解决办法
查看次数
如何使用survey.js 渲染React 组件？
这是一个带有反应示例的工作调查.js：http ://plnkr.co/edit/qXdeQa6x2FHRg0YrOlPL?p=preview
我的 html 也<script src="https://unpkg.com/survey-react"></script>包含在内。
在我的 main.jsx 中，我正在调用将基于 json 文件和多个反应组件填充的 div 的渲染，在我的 json 数组中，我也有一个用于survey.js 的问题 json 对象。我想要实现的是在解析数组时达到问题对象时呈现调查。
在我的顶级组件中，我有这样的要求：
if (section.hasOwnProperty('questions')){
return <Questions key={i+"questions"} id={i+"questions"} questions={section.questions} />;
Questions.jsx：
var React = require('react');
var ReactDOM = require('react-dom');
var Survey = require('survey-react');
var Questions = React.createClass({
render: function() {
Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
window[this.props.id] = new Survey.Model( this.props.questions );
var questionid = this.props.id;
var idi = this.props.id.replace("questions","");
return (
<dt>
<div id={this.props.id}></div>
</div>
</dt>
);
} …推荐指数
解决办法
查看次数
ReactDOM.render是否在渲染之前等待文档加载？
我想知道是否需要DOMCOntentLoaded在调用之前等待文档加载（即收听）ReactDOM.render(...)。似乎其他React示例应用程序都没有这样做，所以我猜ReactDOM.render它们的实现内部已经在等待吗？
推荐指数
解决办法
查看次数
如何在使用React DOM的单元测试中触发状态更改？
我正在使用React Test Utilities对我的一些代码进行单元测试。我打电话renderIntoDocument来渲染一个自定义组件，然后findDOMNode用来测试渲染了什么。我遇到的麻烦是我不确定如何在单元测试的上下文中更新状态并有效触发重新渲染。
这是一些示例代码-请注意代码注释：
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import MyCustomComponent from '../../app/components/MyCustomComponent';
describe('My Test Suite', () => {
let component, node;
test('verify state change', () => {
const items = [{'value': '1'}];
component = TestUtils.renderIntoDocument(
<MyCustomComponent items={items} />
);
node = ReactDOM.findDOMNode(component);
expect(node.querySelector('input[type=text]').value).toEqual('1');
component.state.items = [{'value': '2'}];
// do something here to trigger a re-render?
expect(node.querySelector('input[type=text]').value).toEqual('2');
});
});
不幸的是，改变状态变量似乎无济于事。我不能打电话，component.componentWillReceiveProps()因为这似乎没有定义。
请注意，我确实希望同一个组件调用其渲染函数，而不是用一个全新的组件有效地替换它。原因是因为我发现了一个错误，该错误导致组件基于this.props而不是进行渲染this.state …
推荐指数
解决办法
查看次数
为什么在新的react-router-dom <Redirect />中不会在setTimout内部触发？
因此，我尝试在注销页面和重定向到主网站页面之间进行一些延迟。但是，我陷入了问题，该反应路由器-DOM <Redirect/>方法并不想火的时候，我们把它里面setTimeout()的setInterval()。
因此，如果我们将其从计时器中解开，<Redirect/>它将正常工作。
问题是什么，有什么建议吗？
我的代码：
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';
class LogoutPage extends Component {
constructor(props) {
super(props);
this.state = {
navigate: false
}
}
componentDidMount(e) {
axios.get('http://localhost:3016/logout')
.then(
this.setState({
navigate: true
}),
)
.catch(err => {
console.error(err);
});
if (this.state.navigate) {
setTimeout(() => {
return <Redirect to="/employers" />
}, 2000);
}
};
render() {
if (this.state.navigate) {
setTimeout(() => …javascript reactjs react-dom react-router-v4 react-router-dom
推荐指数
解决办法
查看次数
直接渲染组件警告
我已经有一段时间得到以下警告,而且我很不确定实际上是什么问题:
警告:render():不鼓励将组件直接呈现到document.body中,因为它的子项通常由第三方脚本和浏览器扩展操作.这可能会导致细微的和解问题.尝试渲染为为您的应用创建的容器元素.
有些人建议使用ReactDOM.render(),这正是我首先要做的,我使用facebook的Create React App来开发我的应用程序.
有线索吗？
编辑:我的index.js
ReactDOM.render(<App />, document.getElementById("root"));
推荐指数
解决办法
查看次数
Reactjs：使用 .blur() 使按钮元素失去焦点
我在学习 react 时遇到了一个小问题 - 我想不聚焦（又名blur()）按钮 DOM 元素，但由于某种原因，这不太有效。
我认为这个问题，从我能读到的，是关于 reactstrapButton组件的使用：
<Button className={buttonClass} onClick={this.handleCopyToClipboardClick} ref={this.buttonBlurRef}>
<div className="d-flex justify-content-between">
<span></span>
<span>{ this.state.hasCopiedToClipboard ? 'Copied to clipboard!' : this.state.buttonText }</span>
<span><FontAwesomeIcon icon="copy" /></span>
</div>
</Button>
我在一个组件上绑定了一个 ref？我认为这就是它不起作用的原因。
该onClick功能正在运行，我已将其包含在下面。我在我尝试过的东西中包含了一些注释掉的代码 - 所有这些都破坏了handleCopyToClipboardClick功能。
handleCopyToClipboardClick() {
this.setState(state => ({
hasCopiedToClipboard: !state.hasCopiedToClipboard
}));
// this.buttonBlurRef.current.blur(); <= This isn't working
// this.buttonBlurRef.blur(); <= This isn't working either
// this.refs.buttonBlurRef.current.blur(); <= Or this
// this.refs.buttonBlurRef.blur(); <= Nor this... :'(
setTimeout(
function() {
this.setState(state …推荐指数
解决办法
查看次数
使用 React Dom 创建带有 id 或 class 的元素
我正在创建一个这样的元素
const foo = document.createElement('div');
ReactDOM.render(component, foo);
我想知道是否可以foo使用class或创建id？
推荐指数
解决办法
查看次数