使用 ReactDOM.render 而不使用 "container"

Question

我需要使用 React 渲染：

class App extends Component {
  render() {
    return (
      <div className="App">
        { ReactDOM.render(str) }
      </div>
    );
  }
}

但是没有容器赋值就不能这样使用

如何实现？

Answer 1

ReactDOM.render 是一个带有两个参数的函数，渲染内容和渲染位置...

import React from 'react';
import ReactDOM from 'react-dom';

const str = 'Hello There.'

ReactDOM.render(str, document.getElementById('root'));

第一个参数是 str，第二个参数是渲染位置 document.getElementById('root')

更多信息：https://reactjs.org/docs/react-dom.html

Answer 2

参见 ReactDOMServer and in particular the .renderToString and .renderToStaticMarkup 方法。

类似于

import {renderToStaticMarkup} from 'react-dom/server';

class App extends Component {
  render() {
    return (
      <div className="App">
        { rendertostaticmarkup(str) }
      </div>
    );
  }
}

请记住，上面的内容会转义呈现的 html，您将实际看到代码。如果你想使用呈现的 html 作为 live html 你将需要使用 dangerouslySetInnerHTML 属性.

import {renderToStaticMarkup} from 'react-dom/server';

class App extends Component {
  render() {
    return (
      <div className="App" dangerouslySetInnerHTML={{__html:renderToStaticMarkup(str)}}/>
    );
  }
}

使用 ReactDOM.render 而不使用 "container"

Using ReactDOM.render without "container"

render

reactjs