Javascript 如何使用道具或状态在单击时渲染或不渲染这5个表单中的1个？

我正在寻找关于如何在React中呈现五个表单中的一个的建议，单击它们的五个相关按钮中的一个。我已经让它为一种形式工作了，但我很确定这不是在React中应该做的事情

有一个带有5个按钮的侧边栏和一个显示某些内容的内容区域。单击侧边栏中相应的按钮后，其中一个表单应显示在内容区域中。一次只能显示一个表单。边栏和内容区域都是一个名为GraphArea的类中的函数，该类用于呈现边栏和内容区域

AddNodes（侧边栏中的五个按钮之一）：

const AddNodes=（{showAdd}）=>(


);
导出默认的AddNodes；

问题是，有五个窗体和按钮。。。没有人能合理地继续这样下去

我用的是阿波罗连接状态。默认情况下不会呈现所有5个表单，因此它们的默认值为false。这些值将写入缓存。Apollo查询缓存中的默认值，并在单击时将其变为true

如果你能给我指一条正确的路，那对我意义重大。我错过了在React中如何工作的“点击”，这将是一个很好的机会。这是侧边栏和内容区域的父完整组件：

GraphArea：（父母）

类GraphArea扩展组件{ render（）{ const{updateEditGraph，editGraph:{mode}}=this.props； 常量showAdd=（e）=>{ 更新编辑图( { 变量：{ 索引：“模式”， 值：“addNode” } }); e、 预防默认值（） }; 常量showLink=（e）=>{ 更新编辑图( { 变量：{ 索引：“模式”， 值：“addLink” } }); e、 预防默认值（） }; 返回( ) } } 导出默认组合( graphql（UpdateDitGraph，{name:'UpdateDitGraph'}）， graphql（getEditGraph{ 道具：（{data:{editGraph}}）=>({ 编辑图 }) }) )（GraphArea）； 图形内容：

class GraphContent extends Component {

    render() {

        let content;

        if (this.props.editGraph.mode === 'addNode') {
            content = <AddNodesForm/>
        } else if (this.props.editGraph.mode === 'addLink') {
            content = <LinkNodesForm/>
        } else {
            content = null;
        }

        return (
            <div className="content">
                {content}
                <Graph/>
            </div>
        );
    }
}

export default compose(
    graphql(getEditGraph, {
        props: ({data: {editGraph}}) => ({
            editGraph
        })
    })
)(GraphContent);

类图形内容扩展组件{
render（）{
让内容；
if（this.props.editGraph.mode==='addNode'）{
内容=
}else if（this.props.editGraph.mode==='addLink'）{
内容=
}否则{
内容=空；
}
返回(
{content}
);
}
}
导出默认组合(
graphql（getEditGraph{
道具：（{data:{editGraph}}）=>({
编辑图
})
})
)（图形内容）；

图形显示：

const GraphSidebar = ({ showAdd, showLink }) => (
            <div className="avatars">
                <ul>
                    <AddNodes showAdd={showAdd} />
                    <SequenceNodes />
                    <EditNodes />
                    <LinkNodes showLink={showLink} />
                    <DeleteNodes />
                </ul>
            </div>
        );

const GraphSidebar=（{showAdd，showLink}）=>(


);

我将回答原则上应该发生的事情

您说您有一个顶级组件

GraphArea

用于呈现用于选择表单的组件和表单的容器：

<div>
  <GraphSidebar onClickName={handleClick}/>
  <GraphContent/>
</div>

另外，我想您会说，

GraphContent

不会直接呈现表单，而是呈现呈现表单的其他组件。通过嵌套组件将

formId

作为属性传递给选择要渲染的表单的组件。例如，如果

GraphContent

呈现

Graph

组件，该组件呈现（选择）您喜欢的表单：

<div className="content">
    <Graph formId={this.props.formId}/>
</div>

假设Graph最终是呈现（选择）表单的组件，您可以使用：

Graph = ({formId}) => {
    if (formId === 1) {
      return(<div>...code for form1</div>)
    } else if (formId === 2) {
      return(<div>...code for form2</div>)
    } ...
}

Graph=（{formId}）=>{
如果（formId==1）{
返回（…form1的代码）
}else if（formId==2）{
返回（…form2的代码）
} ...
}

GraphArea

是一个表单，您有5个，或者

是一个表单？

。我认为if-else逻辑也更适合switch语句。我不明白的似乎是道具和状态。从我所读到的，它一定是关于状态的，因为数据可以更改，但我不确定这在代码中是如何体现的。Croraf，谢谢你花时间发布答案，很抱歉我的回复有点晚。我一直在想这件事。你的回答给了我一些新的想法，我更新了我的代码。我想现在好多了。如果我继续这样做，我仍然需要编写5个onClick函数。我还没有使用状态，我只是向商店传递了新的值。（5种不同的模式，而不是5个真值或假值）因此我仍然不能完全确定设置状态或从/向存储获取和发布新值之间的区别。让我们继续聊天。
class GraphArea extends React.Component {

   constructor(){
    super();
    this.state = {formId: 1};
   }

   handleClick(formId) {
     this.setState({fromId: formId});
   }

   render(){
    return (
    <div>
     <GraphSidebar onClickName={handleClick}/>
     <GraphContent formId={this.state.formId}/>
    </div>  
   ) 
   }
}

<div className="content">
    <Graph formId={this.props.formId}/>
</div>

<div className="content">
    <Graph formId={formId}/>
</div>

GraphContent = ({formId}) => {
    ....
}

Graph = ({formId}) => {
    if (formId === 1) {
      return(<div>...code for form1</div>)
    } else if (formId === 2) {
      return(<div>...code for form2</div>)
    } ...
}