使用 switch case 呈现可重用组件数据

Question

我有一个模仿按钮功能的可重用组件。我需要根据 FAQ 值显示四种不同类型的内容，从我的可重用子组件 'CustomButton' 回到父组件。

CustomButton.js

const CustomButton = (props) => {
    const handleClick = () => {
        switch(props.faq){
            case 'general':
                return 'div 1';
            case 'payment':
                return 'div 2';
            case 'business':
                return 'div 3';
            case 'online':
                return 'div 4';
        }
    }
        return (
                <div>
                    {React.cloneElement(props.children, {onClick: handleClick})}
                </div>
        )
}

export default CustomButton

Faq.js

export default class Faq extends Component {
    render() {
        return (
            <div className="set_faq">
                <div style={{display: 'flex', flexDirection:'row', justifyContent: 'space-around'}}>
                    <CustomButton faq={'general'}><button>General FAQ</button></CustomButton>
                    <CustomButton faq={'payment'}><button>Payment FAQs</button></CustomButton>
                    <CustomButton faq={'business'}><button>Business FAQs</button></CustomButton>
                    <CustomButton faq={'online'}><button>Online Sellers</button></CustomButton>
                </div>
                <div>
                    {/* to display content here based on div clicked */}
                </div>

            </div>
        )
    }
}

我无法将 switch 语句返回的结果处理回 CustomButton 文件以呈现数据。请帮助完成周围的工作。

Answer 1

要实现您想要的效果，您需要提升状态并直接在 Faq 组件而不是 CustomButton 中管理单击的值。这样，您可以管理一个独特的状态并相应地显示您需要显示的内容。

CustomButton的简化：

const CustomButton = props => {
  return <div onClick={props.handleClick}>{props.children}</div>;
};

和 App 组件现在管理状态，handleClick 函数现在保存在状态中单击的 faq。这样你就可以根据点击的内容呈现数据

class App extends React.Component {
  state = { clickedValue: "" };

  handleClick = faq => ev => {
    switch (faq) {
      case "general":
        this.setState({ clickedValue: "div 1" });
        break;
      case "payment":
        this.setState({ clickedValue: "div 2" });
        break;
      case "business":
        this.setState({ clickedValue: "div 3" });
        break;
      case "online":
        this.setState({ clickedValue: "div 4" });
        break;
      default:
        return;
    }
  };
  render() {
    return (
      <div className="set_faq">
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-around"
          }}
        >
          <CustomButton handleClick={this.handleClick("general")}>
            <button>General FAQ</button>
          </CustomButton>
          <CustomButton handleClick={this.handleClick("payment")}>
            <button>Payment FAQs</button>
          </CustomButton>
          <CustomButton handleClick={this.handleClick("business")}>
            <button>Business FAQs</button>
          </CustomButton>
          <CustomButton handleClick={this.handleClick("online")}>
            <button>Online Sellers</button>
          </CustomButton>
        </div>
        <div>{this.state.clickedValue}</div>
      </div>
    );
  }
}

这里的工作示例：https://codesandbox.io/s/angry-yalow-bvgbe

PS：我试图限制对您的代码的修改以解决您的问题，但是，在 div 中包含 button 并不是最好的 HTML 标记捕获 onClick 事件。

使用 switch case 呈现可重用组件数据

Reusable component data render using switch case

children

reactjs