如何在点击时使用道具或状态来渲染或不渲染这5种形式中的一种？

Question

我正在寻找有关如何在 React 中单击五个相关按钮之一来呈现五分之一表单的建议。我已经让它实际上适用于一种形式，但我很确定这不是 React 中应该做的事情。

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

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

const AddNodes = ({ showAdd }) => (
    <li role="presentation" className="list-inline">
        <a href="" className="nav-link" onClick={showAdd}>
            <i className="fa fa-plus" aria-hidden="true"/> Add
        </a>
    </li>
);
export default AddNodes;

问题是，有五个表单和按钮...没有办法合理地继续这样下去。

我正在使用 Apollo 链接状态。默认情况下，所有 5 五个表单都不会呈现，因此它们的默认值为 false。这些值被写入缓存。 Apollo 查询并在点击时将缓存中的默认值更改为 true。

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

GraphArea：（父级）

class GraphArea extends Component {

    render() {

        const { updateEditGraph, editGraph: { mode } } = this.props;

        const showAdd = (e) => {
            updateEditGraph(
                {
                    variables: {
                        index: 'mode',
                        value: 'addNode'
                    }
                });
            e.preventDefault()
        };

        const showLink = (e) => {
            updateEditGraph(
                {
                    variables: {
                        index: 'mode',
                        value: 'addLink'
                    }
                });
            e.preventDefault()
        };

        return (
            <div className="item">
                <GraphSidebar showAdd={showAdd} showLink={showLink}/>
                <GraphContent/>
            </div>
        )
    }
}

export default compose(
    graphql(updateEditGraph, {name: 'updateEditGraph'}),
    graphql(getEditGraph, {
        props: ({data: {editGraph}}) => ({
            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);

GraphSidebar：

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

Answer 1

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

你说你有一个顶级组件GraphArea，它呈现用于选择表单的组件和表单的容器：

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

GraphSidebar 和GraphContent 以这样的方式相关，GraphSidebar 改变了应该在GraphContent 上呈现的状态，即它们与相同的状态相关。因此，他们的共同父母 (GraphArea) 应该保持该状态。然后将状态传递给包含表单的GraphContent。

将GraphArea 设为class:

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

另外我认为你说GraphContent 不直接呈现表单，而是呈现呈现表单的其他一些组件。您将formId 作为属性通过嵌套组件一直传递到选择要呈现的表单的组件。例如，如果 GraphContent 呈现 Graph 组件，该组件呈现（选择）您这样做的表单：

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

或者只是

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

如果GraphContent 不是一个类，而是一个类似的函数

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

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

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