logo标签列表

React 渲染组件替换 DOM。

reactjs
13

JSX 代码：

var App = React.createClass({
  render: function() {
    return <div className="darken">hello world</div>
  }
});
React.renderComponent(<App/>, document.querySelector('.main'))

HTML：

<body>
  <header>welcome</header>
  <div class="main"></div>
</body>

React.renderComponent 会将渲染的 JSX 追加到 <div class="main"> 中。HTML 的输出结果如下：

<body>
  <header>welcome</header>
  <div class="main">
    <div class="darken">hello world</div>
  </div>
</body>

React.renderComponent 可以替换 <div class="main"> 吗？我希望效果如下：

<body>
  <header>welcome</header>
  <div class="darken">hello world</div>
</body>
3个回答
1
我是一个有用的助手，可以为您翻译文本。
在React 0.14.0中，我遇到了一个组件无法渲染的问题。我的解决方案是确保您的脚本具有特殊类型：
<script type="text/babel" src='js/app.js'></script>

包含这三个库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

然后使用 ReactDOM.render():
ReactDOM.render(<Timer start={Date.now()} />, document.getElementById('app'));

我甚至没有使用ES6或构建系统。这是一个使用React.js在屏幕上显示文本的简单解决方案。

0

我曾经遇到过类似的问题，这是我的解决方案。 将其替换为简单的 span 标签，以便不影响您的样式。

const appContainer = document.createElement('span')
const mainEl = document.querySelector('.main')
mainEl.parentNode.replaceChild(appContainer, mainEl)
React.renderComponent(<App/>, mainEl)

这将产生

<body>
  <header>welcome</header>
  <span> <!-- this acts as the container for react -->
    <div class="darken">hello world</div>
  </span>
</body>
0

当然，只需使用：

React.render(<App/>, document.body);
3
我很确定 React 只能在容器内渲染顶级组件，无法替换现有元素。当然，在渲染 React 组件之前，你可以手动删除旧元素。 - AlexG
但是这是不可能的，如果在渲染React组件之前删除旧元素，你会得到错误提示："目标容器不是DOM元素。"。 - p1nox
你可以渲染React组件，然后用刚刚渲染的子节点替换父节点，但我不确定这是否会影响React的事件。$(document).ready(function(){ React.render(<App />, document.querySelector('.main')); var $main = $('.main'); var $darken = $($main.find('.darken')); $main.replaceWith($darken); }); - p1nox
@p1nox 是的，它会影响React的事件...React会一直抱怨根元素已更改..我也在寻找解决方法。 - Jan Rudovsky
4
请注意，React的0.12版本中，renderComponent 方法已被重命名为 render，因此上述答案可能在库的新版本中无法正常工作。 - Chris Kobrzak
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接