ReactJS ReactDOM呈现用于单独页面
我正在将我的页面从html和jquery迁移到使用React，我知道React Router和Redux是在构建React应用程序时处理路由的方法，但目前，我想知道如何更改设置，以便能够为不同的页面呈现不同的React组件。目前，我可以在加载索引页时呈现一个react组件，但我认为可以添加另一个ReactDOM。render（）在它下面，为不同页面上的组件指定不同的div id，但我注意到一个错误，不变冲突：目标容器不是DOM元素。这与不使用react路由器或其他东西有关吗？
这是我的索引。js：
import React from 'react';
import ReactDOM from 'react-dom';
import ActivityFeed from './components/App/ActivityFeed/ActivityFeed';
import CreateAnnotation from './components/App/Annotation/CreateAnnotation';
ReactDOM.render(<ActivityFeed />, document.getElementById('annotation-card'));
ReactDOM.render(<CreateAnnotation />, document.getElementById('annotation-form'));
这里是
//GET /api/activity-feed and set to state
export default class CreateAnnotation extends React.Component {
constructor(props, context) {
super(props, context);
this.state = this.context.data || window.__INITIAL_STATE__ || {
notifications: [],
reportLinks: [],
files: []
}
}
render() {
return (
<div>
<p>test</p>
</div>
)
}
}
这里是视图文件：
<!DOCTYPE html>
<head>
{{> app/app-head}}
</head>
<body>
<div id="annotation-form"></div>
{{> general/bundle-js}}
</body>
</html>
{{
<script src="/bundle.js"></script>
共有1个答案
ReactDOM renders a React element into the DOM in the supplied container
and return a reference to the component (or returns null for stateless
components). If the React element was previously rendered into
container , this will perform an update on it and only mutate the DOM
as necessary to reflect the latest React element.
从技术上讲，您不能使用多个React DOM渲染函数将多个React元素渲染到DOM中，因为它将始终替换先前渲染的DOM。
看见https://reactjs.org/docs/react-dom.html
正确的方法是创建多个组件并将它们导入pp.js文件。然后，您的index.js文件应该将pp.js文件作为一个整体组件导入，ReactDOM仅将pp.js呈现为单个组件。
-
我正在React.js网站上浏览react教程（井字游戏），我想在用户单击它时单独设置每个正方形的样式。更具体地说，当轮到玩家 X 时，正方形应该变成红色，当轮到玩家 O 时，正方形应该变成蓝色。我试图使用道具和状态来改变颜色。但是，react 会更改所有方块，而不是单独更改方块的颜色。 以下是我迄今为止所尝试的。
-
问题内容： 我正在尝试实现类似于this或this的东西。 我创建了一个用户控件，一个Web服务和一个Web方法来返回控件的呈现的html，并通过jQuery执行ajax调用。 一切正常，但是如果我在用户控件中放置了使用相对路径的内容（在我的情况下为带有NavigateUrl =“〜/ mypage.aspx”的HyperLink），则相对路径的解析在我的开发服务器中将失败。 我期望： http：
-
我正在使用PhantomJS进行网页截图。 我看到过其他关于@font-face问题的帖子，但我页面上的字体呈现正确。我唯一的问题是，每次截图时，字体显示与前一个截图略有不同。所以尽管他们的渲染是正确的，但他们在截图上的外观是不一致的。 我已经尝试了许多修复，大多数都是基于这样的假设，即这与页面准备好之前拍摄的截图有关，但这似乎不是问题所在。例如，我已经延迟了截图，以便字体有时间加载和呈现，但这并
-
我要求在JSF2.2页面上输入2个输入值。我们正在使用Primefaces控件。然后通过h：command按钮将这些值提交给托管bean方法。 然后，基于这些值，我想将同一JSF页面上的一个单独的输出字段设置为一个特定的值。 因此，我目前的问题是尝试连接一个托管bean，以便它将一个值返回到我的JSF页面上的字段，在本例中，字段名是mgrs。主要的问题是，我要处理的是生成返回值的第三方库，我不确定
-
我想解决的是，如何渲染到一个特定的页面，每当用户点击动态网址？在"product_list"api数据中有一个键"url"，每当用户点击这个"url"，那么用户将被重定向到另一个特定的"product_detail"页面特定的页面？所以每当用户点击网址时，用户会看到一个特定的用户界面页面，而不是动态网址页面。 我可能是新手。我试图解决这个问题，但我不知道我哪里做错了。如果有人能帮我解决我要解决的问
-
我正在尝试使用Spring Security性和AngularJS设置默认SuccessUrl，但是成功登录后，html页面将加载到网络中，但没有显示。这是我的安全配置 但是，我仍然显示登录页面，而不是hello.jsp页面。登录的Angular服务： 有人知道为什么吗？