将body标签应用于ReactJ中的单独组件

Question

我如何将不同的身体标签应用于不同的组件，即如果我想将身体应用于仪表板组件，但也需要一个不同的身体来注册页面组件？

Answer 1

来自您的评论：

是否可以将不同的类应用于组件的不同车身标签 - 即我的仪表板组件，我希望它具有

no，不在反应中，组件无法伸出并修改其容器。

踏入外部反应，您始终可以将DOM操纵代码放在组件中。例如，您可以在componentDidMount中设置类并在componentWillUnmount中删除。

示例（这使用classList，请确保检查目标浏览器，您可能必须使用className）：

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {flag: true};
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    const flag = !this.state.flag;
    console.log(flag);
    this.setState({flag});
  }
  render() {
    console.log(this.toggle);
    return (
      <div>
        <input type="button" value="Toggle" onClick={this.toggle} />
        {this.state.flag ? <Foo /> : <Bar />}
      </div>
    );
  }
}
class Foo extends React.Component {
  componentDidMount() {
    document.body.classList.add("foo");
  }
  componentWillUnmount() {
    document.body.classList.remove("foo");
  }
  render() {
    return <div>This is foo</div>;
  }
}
class Bar extends React.Component {
  componentDidMount() {
    document.body.classList.add("bar");
  }
  componentWillUnmount() {
    document.body.classList.remove("bar");
  }
  render() {
    return <div>This is bar</div>;
  }
}
ReactDOM.render(
  <Main />,
  document.body
);

.foo {
  color: blue;
}
.bar {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

React Body className模块确实可以做您说的。

在您的仪表板组件中，仅在 <BodyClassName className="dashboard" />的某个地方渲染，并为家庭组件做同样的操作，例如。<BodyClassName className="home-page" />。

您还可以在<BodyClassName className="xyz">...</BodyClassName>标签之间包装组件，并做其他事情，例如有条件地渲染它们。