Question

如何将不同的正文标记应用于不同的组件，即如果我想将主体应用于仪表板组件，但又想要注册页面组件使用不同的正文？

Answer 1

来自你的评论：

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

不，不在React本身内，组件无法伸出并修改其容器。

走出React，你总是可以将DOM操作代码放在一个组件中。例如，您可以在componentDidMount中设置该类，并将其移除componentWillUnmount。

示例（使用classList，请务必检查目标浏览器，您可能需要使用className）：

＆＃13;

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
);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

React Body ClassName module正是您所说的。

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

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

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

2 个答案: