Question

我有一个模仿按钮功能的可重用组件。我需要根据常见问题解答值显示四种不同类型的内容，从可重用的子组件“ 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：我试图限制对代码的修改以解决您的问题，但是，在捕获button事件的div内包含onClick并不是最好的HTML标记。

使用开关盒渲染可重用的组件数据

1 个答案: