javascript - 如何使用 Prop 或状态在点击时渲染或不渲染这 5 种形式中的 1 种？

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 中事物如何工作的“点击”，这将是一个很好的机会。这是侧边栏和内容区域的父级完整组件:

图形区域:(父级)

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

图表边栏:

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