Javascript 反应：类外的渲染和链接切换按钮

我有下面的例子，其中

toggleComponent.js

工作得非常好

这里的问题是，我不想在切换中呈现

，而是我想要相反的，我想切换将在另一个组件中调用的

，具体取决于切换的状态

因此，

在

toggleComponent.js

之外，但它们是链接在一起的。因此，我可以使用切换在外部显示它

给你一个想法的图像：

链接到功能代码：

import React，{Component}来自“React”；
从“/ToggleComponent”导入ToggleComponent；
从“/content”导入ContentComponent；
导出默认类App扩展React.Component{
render（）{
返回(
(
{isShowBody&&test}
显示
)}
/>
(
{isShowBody&&(
)}
显示
)}
/>
);
}
}

如果您想在组件之间共享状态，一个很好的方法就是使用回调和状态。我将在下面使用一些功能组件，但同样的原则也适用于基于类的组件及其

setState

功能

您可以看到这个示例正在运行，我已经尝试重现您在问题中显示的一些内容

import React, { useState, useEffect, useCallback } from "react";
import "./style.css";

const ToggleComponent = props => {
  const { label: labelText, checked, onClick } = props;
  return (
    <label>
      <input type="checkbox" checked={checked} onClick={onClick} />
      {labelText}
    </label>
  );
};

const ContentComponent = props => {
  const { label, children, render: renderFromProps, onChange } = props;
  const [checked, setChecked] = useState(false);

  const defaultRender = () => null;
  const render = renderFromProps || children || defaultRender;

  return (
    <div>
      <ToggleComponent
        label={label}
        checked={checked}
        onClick={() => {
          setChecked(previousChecked => !previousChecked);
        }}
      />
      {render(checked)}
    </div>
  );
};

const Holder = () => {
  return (
    <div>
      <ContentComponent label="First">
        {checked => (
          <h1>First content ({checked ? "checked" : "unchecked"})</h1>
        )}
      </ContentComponent>
      <ContentComponent
        label="Second"
        render={checked => (checked ? <h1>Second content</h1> : null)}
      />
    </div>
  );
};

---

如果您想在组件之间共享状态，一个很好的方法就是使用回调和状态。我将在下面使用一些功能组件，但同样的原则也适用于基于类的组件及其

setState

功能

您可以看到这个示例正在运行，我已经尝试重现您在问题中显示的一些内容

import React, { useState, useEffect, useCallback } from "react";
import "./style.css";

const ToggleComponent = props => {
  const { label: labelText, checked, onClick } = props;
  return (
    <label>
      <input type="checkbox" checked={checked} onClick={onClick} />
      {labelText}
    </label>
  );
};

const ContentComponent = props => {
  const { label, children, render: renderFromProps, onChange } = props;
  const [checked, setChecked] = useState(false);

  const defaultRender = () => null;
  const render = renderFromProps || children || defaultRender;

  return (
    <div>
      <ToggleComponent
        label={label}
        checked={checked}
        onClick={() => {
          setChecked(previousChecked => !previousChecked);
        }}
      />
      {render(checked)}
    </div>
  );
};

const Holder = () => {
  return (
    <div>
      <ContentComponent label="First">
        {checked => (
          <h1>First content ({checked ? "checked" : "unchecked"})</h1>
        )}
      </ContentComponent>
      <ContentComponent
        label="Second"
        render={checked => (checked ? <h1>Second content</h1> : null)}
      />
    </div>
  );
};

---

比特调整了你的来源

修改的切换组件

import React from "react";

export default class ToggleComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      checked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = () => {
    this.setState({ checked: !this.state.checked });
    this.props.toggled(!this.state.checked);
  };

  checkbox = () => {
    return (
      <div>
        <label>Toggle</label>
        <span className="switch switch-sm">
          <label>
            <input type="checkbox" name="select" onClick={this.handleClick} />
            <span />
          </label>
        </span>
      </div>
    );
  };

  render() {
    return this.checkbox();
  }
}

从“React”导入React；
导出默认类ToggleComponent扩展React.Component{
构造函数（）{
超级（）；
此.state={
勾选：假
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick=（）=>{
this.setState（{checked:！this.state.checked}）；
this.props.toggled（！this.state.checked）；
};
复选框=（）=>{
返回(
切换
);
};
render（）{
返回此.checkbox（）；
}
}

添加了OtherComponent，其中包含ContentComponent

import React, { Component } from "react";
import ContentComponent from "./content";

export default class OtherComponent extends React.Component {
  render() {
    return <div>{this.props.show ? <ContentComponent /> : null}</div>;
  }
}

import React，{Component}来自“React”；
从“/content”导入ContentComponent；
导出默认类OtherComponent扩展React.Component{
render（）{
返回{this.props.show？：null}；
}
}

根据您的要求分开。

已修改的应用程序

import React, { Component, PropTypes } from "react";
import ToggleComponent from "./toggleComponent";
import OtherComponent from "./otherComponent";

export default class App extends React.Component {
  constructor() {
    super();
    this.toggled = this.toggled.bind(this);
    this.state = { show: false };
  }

  toggled(value) {
    this.setState({ show: value });
  }

  render() {
    return (
      <div>
        <ToggleComponent toggled={this.toggled} />
        <OtherComponent show={this.state.show} />
      </div>
    );
  }
}

import React，{Component，PropTypes}来自“React”；
从“/ToggleComponent”导入ToggleComponent；
从“/OtherComponent”导入其他组件；
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
this.toggled=this.toggled.bind（this）；
this.state={show:false}；
}
切换（值）{
this.setState（{show:value}）；
}
render（）{
返回(
);
}
}

---

工作演示at.

位调整了源代码

修改的切换组件

import React from "react";

export default class ToggleComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      checked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = () => {
    this.setState({ checked: !this.state.checked });
    this.props.toggled(!this.state.checked);
  };

  checkbox = () => {
    return (
      <div>
        <label>Toggle</label>
        <span className="switch switch-sm">
          <label>
            <input type="checkbox" name="select" onClick={this.handleClick} />
            <span />
          </label>
        </span>
      </div>
    );
  };

  render() {
    return this.checkbox();
  }
}

从“React”导入React；
导出默认类ToggleComponent扩展React.Component{
构造函数（）{
超级（）；
此.state={
勾选：假
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick=（）=>{
this.setState（{checked:！this.state.checked}）；
this.props.toggled（！this.state.checked）；
};
复选框=（）=>{
返回(
切换
);
};
render（）{
返回此.checkbox（）；
}
}

添加了OtherComponent，其中包含ContentComponent

import React, { Component } from "react";
import ContentComponent from "./content";

export default class OtherComponent extends React.Component {
  render() {
    return <div>{this.props.show ? <ContentComponent /> : null}</div>;
  }
}

import React，{Component}来自“React”；
从“/content”导入ContentComponent；
导出默认类OtherComponent扩展React.Component{
render（）{
返回{this.props.show？：null}；
}
}

根据您的要求分开。

已修改的应用程序

import React, { Component, PropTypes } from "react";
import ToggleComponent from "./toggleComponent";
import OtherComponent from "./otherComponent";

export default class App extends React.Component {
  constructor() {
    super();
    this.toggled = this.toggled.bind(this);
    this.state = { show: false };
  }

  toggled(value) {
    this.setState({ show: value });
  }

  render() {
    return (
      <div>
        <ToggleComponent toggled={this.toggled} />
        <OtherComponent show={this.state.show} />
      </div>
    );
  }
}

import React，{Component，PropTypes}来自“React”；
从“/ToggleComponent”导入ToggleComponent；
从“/OtherComponent”导入其他组件；
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
this.toggled=this.toggled.bind（this）；
this.state={show:false}；
}
切换（值）{
this.setState（{show:value}）；
}
render（）{
返回(
);
}
}

---

工作演示在。

是的，我需要在组件之间传递状态，而不是整个组件。我想知道是否可以传递

this.state={isShowBody:false，}作为
{this.props.isShowBody}
并在类似
{{this.props.isShowBody}&&test}
的内容中使用它。这似乎给了我一个错误。我不经常使用基于类的组件，但我认为您可以查找与上面显示的第二个
useffect
类似的组件，并返回
{isShow:nextProps.isShow}
。关于第一个
useffect
，自下而上的更改，也许您应该检查并调用
this.props.onChange（nextState.isShow）
非常感谢。多亏了你，我才使它运转起来。不管怎样，作为一个初学者，你能告诉我为什么人们使用函数和类吗？对于组件，我更喜欢函数而不是类，因为我发现它们比基于类的更容易接近，而且我很少发现类-