Question

我想创建一个React网站，您可以点击按钮并将语言更改为德语或英语。我是React的新手，还在学习。

我创建了一个简单的JSON，如下所示：

{
  "de": {
    "header": "Willkommen",
    "footer": "Auf Wiedersehen"
  },
  "eng": {
    "header": "Welcome",
    "footer": "Goodbye"
  }
}

我创建了一个按钮，可以在 onClick 时切换其状态。但是，如果我想在任何地方访问它，我认为状态是错误的方法。

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isOn: true};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    if (this.state.isOn) {
      this.setState({isOn: false})
    } else {
      this.setState({isOn: true})
    }
  }
  render() {
    return(
      <button type="button" onClick={this.handleClick}>DE/ENG{JSON.stringify(this.state.isOn)}</button>
    );
  }
}

现在我想导入JSON数据并将正确的数据放入组件中。这里的这个没有工作。我不知道该怎么做。单击按钮时，每个组件都应获取德语或英语数据。我想在很多组件中使用它。（例如，当我使用const data = DATA.de时，它正在工作，但是当我点击按钮时，它不会改变内容。）

import DATA from './data.json';

class Main extends React.Component {
  render() {
    const data = Button.state.isOn ? DATA.de : DATA.eng;
    return (
      <div>
        <Button onIsOnChange={this.buttonChange} />
        <span>{data.header}</span>
      </div>
    );
  }
}

你知道怎么做吗？

Answer 1

React鼓励你提升状态＆＃34;这是一个很好的机会。我建议您从handleClick元素中删除状态和Button方法（尝试使用functional stateless component），然后将相同的状态（开/关）添加到{ {1}}元素。单击该按钮后，只需拨打电话（使用onClick属性）到Main即可。您需要将this.props.handleClick作为该按钮的支柱，并在handleClick元素的Main方法中，相应地设置您的状态。您还需要为handleClick组件提供Button道具。

在isOn Main const中，您将回复data。

Answer 2

我建议稍微改变你的设计。在Main组件上创建一个语言更改（例如，在onLanguaheChange＆＃39;上调用）方法并将其作为prop传递给Button组件，

<Button onClick={this.onLanguageChange}.../>

现在，在Button组件中，您只需调用this.props.onClick(...)并将其传递给所选/所需语言即可。它将使用您的参数调用主要组件方法onLanguageChange。然后，您可以根据需要更改主要状态，并将其传递给您喜欢的任何组件。

单击按钮

2 个答案: