将 body 标签应用于 ReactJS 中的单独组件答案

【问题标题】：Apply body tag to separate components in ReactJS将 body 标签应用于 ReactJS 中的单独组件
【发布时间】：2016-12-07 17:20:22
【问题描述】：

如何将不同的正文标签应用于不同的组件，即，如果我想将正文应用于仪表板组件，但还想为注册页面组件使用不同的正文？

【问题讨论】：

这和AngularJS有什么关系？
不清楚你在问什么。文档中只有一个 body 元素（因此只有一对主体标签 [<body> 和 </body>]）。 “应用”不同的“正文标签”是什么意思？
是否可以将不同的类应用于组件的不同主体标签 - 即我的仪表板组件，我希望它具有并且也许主组件可以具有

标签： javascript html css reactjs

【解决方案1】：

来自您的评论：

是否可以将不同的类应用于组件的不同主体标签 - 即我的仪表板组件，我希望它拥有，也许主组件可以拥有

不，不在 React 内部，组件无法访问并修改其容器。

在 React 之外，您始终可以将 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>

【讨论】：

非常感谢！

【解决方案2】：

React Body ClassName module 完全按照你说的做。

在您的仪表板组件中，只需在某处呈现 <BodyClassName className="dashboard" /> 并为 Home 组件执行相同的操作，例如。 <BodyClassName className="home-page" />.

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

【讨论】：