类组件内部的反应函数组件，是否为有效组件？有什么区别？

Question

我正尝试在[class component]中检查条件后返回function component。这是我的代码：

 class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

   function WarningBanner() {
    if (this.state == false) {
      return null;
    }

    return (
      <div className="warning">
        Warning!
      </div>
    );
  } 
  render() {
    return (
      <div>
        <WarningBanner />
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);

是[class [component component]]内的[[[[function component]）视为有效的[[component吗？还是有另一种方法可以在class component]内定义function component？

[

[[[[class]组件

内部的[[[function]或class组件] >？我也尝试过这样做：<WarningBanner warn = {this.state}/> 和

function WarningBanner(warning) {
    if (warning.warn == false) {
      return null;
    }
    return (<div className="warning">Warning!</div>);
  }

我正在尝试在类组件中检查条件之后返回一个函数组件。这是我的代码：类页面扩展React.Component {构造函数（props）{super（props）; ...

您可以做类似的事情...
    class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

  render() {
    return (
      <div>
        {this.props.warn && <div className="warning">Warning!</div>}
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);
{this.props.warn && <div className="warning">Warning!</div>}将评估条件是否为真，如果是，则渲染组件。
如果您想制作一个更复杂的功能组件，我建议像这样在您的有状态组件之外创建它...
const Warning = () => {
  return (<div className="warning">Warning!</div>);
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

  render() {
    return (
      <div>
        {this.props.warn && <Warning />}
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);
我建议此方法符合React最佳实践，因为在Codepen之外，您将拥有用于不同组件的不同文件。
这里有一支笔来说明：https://codepen.io/paulmartin91/pen/zYGKRNa
希望这会有所帮助！
 
我不认为嵌套这样的组件定义是惯用的。
可以使用属性在组件之间共享数据。
您可以在&&组件中使用条件（在这里，我使用Page运算符）来显示或隐藏标语：
 
function WarningBanner({message}) {
    return (<div className="warning">Warning!</div>)
} 

class Page extends React.Component {
  render() {
    return (
      <div>
        { this.props.showWarning && <WarningBanner /> }
      </div>
    )
  }
}

ReactDOM.render(
    <Page showWarning={true} />,
    document.getElementById('root')
)
* {
  font-family: sans-serif;
  margin: 0;
}
button {
  height: 40px;
  width: 200px;
}
.warning {
  background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;

  font-size: 14pt;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div> 
是，类组件内部的功能组合是有效的，并且也可以共享主组件的状态，并且它们在
功能组件
和
功能组件
]中没有区别。在class component
中作为单个组件。这里的问题完全与javascript有关，而不是做出反应。这是正确的代码：class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: props.warn};
    this.warning = this.WarningBanner.bind(this);
  }
  WarningBanner() {
    if (this.state.value == false) { 
      return null;
    }
    return (<div className="warning">Warning!</div>);
  }

  render() {
    return (<div>{this.warning()}</div>);
  }
}

ReactDOM.render( <Page warn={true}/>, document.getElementById('root'));
问题1： 
function关键字不能在javascript类中定义，因为类本身应该充当函数。
问题2：
 javascript类中的新函数需要进行“绑定”并通过“ this.warning”变量进行访问。
我希望它对某人有用。谢谢。 

Answer 1

如果您想制作一个更复杂的功能组件，我建议像这样在您的有状态组件之外创建它...

Answer 2

Answer 3