Javascript 带有条件的React按钮组件不工作并显示

我对条件ReactJS组件有问题。 我创建了一个组件，如果访问者点击按钮，它将显示更多信息

如果有人能帮助我，我做错了什么，并向我解释，那将是非常棒的（那将是非常棒的）

多谢各位

function SimpleButton(params) {
  return (
      <button onClick={props.onClick}>
          Show content
      </button>
  );
}

function ExtendedButton(params) {
  button (
      <button onClick={props.onClick}>
          <div>
              <p>Displays content</p>
          </div>
      </button>
  );
}

class QuoteButton extends React.Component {
  constructor(props) {
      super(props);
      this.hideDisplay = this.hideDisplay.bind(this);
      this.showDisplay = this.showDisplay.bind(this);
      this.state = {revealed: false}
  }

  hideDisplay() {
      this.setState({revealed: true});
  }

  showDisplay() {
      this.setState({revealed: false});
  }

  render() {
      const revealed = this.state.revealed;
      let button;
      if (revealed) {
          button = <SimpleButton onClick={this.hideDisplay} />;
      } else {
          button = <ExtendedButton onClick={this.showDisplay} />;
      }

      return (
        <div>
          <ExtendingButton revealed = {revealed} />
          {button}
        </div>
      );
  }
}

函数SimpleButton（参数）{
返回(
显示内容
);
}
功能扩展按钮（参数）{
钮扣(
显示内容

);
}
类QuoteButton扩展了React.Component{
建造师（道具）{
超级（道具）；
this.hideDisplay=this.hideDisplay.bind（this）；
this.showDisplay=this.showDisplay.bind（this）；
this.state={discovered:false}
}
hideDisplay（）{
this.setState（{discovered:true}）；
}
showDisplay（）{
this.setState（{discovered:false}）；
}
render（）{
const discovered=this.state.discovered；
让按钮；
如果（透露）{
按钮=；
}否则{
按钮=；
}
返回(
{按钮}
);
}
}

const SimpleButton=（道具）=>(
显示内容
);
常量扩展按钮=（道具）=>(
显示内容

);
类QuoteButton扩展了React.Component{
建造师（道具）{
超级（道具）；
this.hideDisplay=this.hideDisplay.bind（this）；
this.showDisplay=this.showDisplay.bind（this）；
this.state={discovered:false}；
}
hideDisplay（）{
this.setState（{discovered:true}）；
}
showDisplay（）{
this.setState（{discovered:false}）；
console.log（this.state）；
}
render（）{
const discovered=this.state.discovered；
回来！揭露(
) : (
);
}
}

---

首先，您的

QuoteButton

组件无法识别

按钮，因为它不是来自状态或道具。试着用这个代替
{button}
：

{
  !!revealed ? <SimpleButton onClick={this.hideDisplay} /> :
    <ExtendedButton onClick={this.showDisplay} />
}

{
！！透露？：
}

另外，请查看此StackBlitz以了解更多信息。
需要在
render（）
中使用
返回按钮
，从哪里获得此
simpleButton
？请在类组件中编写
extendedButton
函数。我想这可能有用。正如@diedu提到的，您缺少
return
。此外，我添加的组件需要使用大写名称：return（{button}）；在render（）中，但它仍然没有显示任何内容