Отображение данных компонента многократного использования с использованием регистра - PullRequest
Новая
       33

Отображение данных компонента многократного использования с использованием регистра

0 голосов
/ 11 октября 2019

У меня есть компонент многократного использования, имитирующий функцию кнопки. Мне нужно отобразить четыре различных типа контента на основе значения 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 для отображения данных,Пожалуйста, помогите завершить работу.

1 Ответ

1 голос
/ 11 октября 2019

Чтобы достичь того, что вы хотите, вам нужно поднять состояние и управлять направлением нажатия по значению внутри компонента 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: Я пытался ограничить изменения в вашем коде, чтобы решить вашу проблему, однако,это не лучшая разметка HTML, чтобы иметь button внутри div, которая фиксирует событие onClick.

...