Question

组件1：仅在独立时才会渲染

const React = require('react');
class URI extends React.Component {render() { return <h1>URI</h1>; }}
module.exports = URI;

组件2：正确渲染，但放置在前面时消失

const React = require('react');

class CONTAINER extends React.Component {render() { return <div style={{backgroundColor: 'black'}} />}}

module.exports = CONTAINER;

App.js：

const React = require('react');
const ReactDOM = require('react-dom');

const URI = require('./uri.jsx');
const CONTAINER = require('./container.jsx');


ReactDOM.render(

  <URI /> // breaks the whole thing but does not when standing alone.
  <CONTAINER> </CONTAINER>

//////Tried
/*
<CONTAINER>   <URI /></CONTAINER>
<URI> </URI>
<CONTAINER/>
*/

,document.getElementById('root'));

所以我只是尝试将URI放入容器中，但是在浏览器中看到的只是容器。第一次使用react，已经比HTML复杂。

Answer 1

您只能传递一个组件作为ReactDOM.render（）中的第一个参数。

如果您有多个组件，请将它们全部包含在一个组件中。

示例：我在div中添加了URI和CONTAINER。我将div作为第一个参数传递。

ReactDOM.render(
  <div>
    <URI/>
    <CONTAINER/>
  </div>
,document.getElementById('root'));

Answer 2

关于React组件要记住的关键事情是您正在编写元素的实现（例如<img />或<span />）。浏览器遵循的规范说“ img拥有孩子是无效的”-因此，当您传递<img>What does this even *mean*?</img>时，它将做正确的事情。

通过

React，您（作为组件/元素的作者）可以通过传递您的元素在props中“包装”的所有元素来控制是否接受子元素，特别是在children字段中。因此，在您的示例中，使用了基于类的组件this.props.children。如果您想将CONTAINER用作容器，则只需指定孩子的去向：

const React = require('react');

class CONTAINER extends React.Component {
  render() {
    return <div style={{backgroundColor: 'black'}}>{this.props.children}</div>;
  }
}

module.exports = CONTAINER;

然后，您可以按照希望使用接受子元素的HTML元素的方式使用它：

ReactDOM.render(
  <CONTAINER>
    <URI />
  </CONTAINER>,
  document.getElementById('root')
);

您可以使用功能组件来缩短它：

module.exports = function CONTAINER(props) {
  return <div style={{backgroundColor: 'black'}}>{props.children}</div>;
};

还有一点ES2015糖：

module.exports = ({ children }) =>
  <div style={{backgroundColor: 'black'}}>{children}</div>

但是无论使用哪种样式，您都可以控制在哪里（以及是否）接受子级“ DOM”节点作为组件的子级。

Answer 3

您可以尝试使用 React.Fragment

它允许我们在 render 中使用多个组件，而不必总是将它们包装在不必要的父组件/ html元素中。

ReactDOM.render(
  <React.Fragment>
    <URI />
    <CONTAINER>
    </CONTAINER>
  </React.Fragment>,
  document.getElementById('root')
);

React不会渲染多个组件

3 个答案: