Reactjs 如何在嵌套函数中的无状态函数中设置状态？_Reactjs_State_React Functional Component

Reactjs 如何在嵌套函数中的无状态函数中设置状态？

reactjs

Reactjs 如何在嵌套函数中的无状态函数中设置状态？,reactjs,state,react-functional-component,Reactjs,State,React Functional Component,我知道，当函数嵌套时，我无法更改无状态函数中的状态，尽管我离按我所希望的顺序设置页面工作状态只有这么远。我想把它作为一个功能组件。问题在下面，我想在这个函数下设置语言，或者以任何其他方式工作，我知道如何使用类组件实现这一点，但除非有10票赞成，否则我更愿意使用函数 function changeTounge(e) { console.log("Write something!!"); console.log(e.currentTarget.dataset.id);

我知道，当函数嵌套时，我无法更改无状态函数中的状态，尽管我离按我所希望的顺序设置页面工作状态只有这么远。我想把它作为一个功能组件。问题在下面，我想在这个函数下设置语言，或者以任何其他方式工作，我知道如何使用类组件实现这一点，但除非有10票赞成，否则我更愿意使用函数

  function changeTounge(e) {
  console.log("Write something!!");
  console.log(e.currentTarget.dataset.id);
  console.log(e.currentTarget.dataset.value);
  //setLanguage({ iso2: "lv", speak: "Latviešu" });
}

完整代码为：

import React, { useState } from "react";
import { Link } from "react-router-dom";

export function PrimaryNav() {
  const [language, setLanguage] = useState({ iso2: "us", speak: "English" });
  return (
    <div className="primary-nav">
      <ul className="navigation">
        <li className="active">
          <Link to="/">Home</Link>
        </li>
        <li className="has-child">
          <a href="#nav-homepages">Opportunities</a>
          <div className="wrapper">
            <div id="nav-homepages" className="nav-wrapper">
              <ul>
                {OpsOption("RealEstate", "Real Estate")}
                {OpsOption("Vehicles", "Vehicles")}
                {OpsOption("JobSearch", "Job Search")}
                {OpsOption("PersonalCompany", "Personal Company")}
                {OpsOption("Inves`enter code here`tInIdea", "Invest In Idea")}
              </ul>
            </div>
          </div>
        </li>
        <li>
          <Link to="/contact">Help &amp; Support</Link>
        </li>

        <li className="has-child language">
          {ActiveLanguage(language.iso2, language.speak)}
          <div className="wrapper">
            <div id="nav-languages" className="nav-wrapper">
              <ul>
                {LanguageOption("English", "us")}
                {LanguageOption("British", "gb")}
                {LanguageOption("Latviešu", "lv")}
                {LanguageOption("Estonia", "ee")}
                {LanguageOption("Lithuania", "lt")}
                {LanguageOption("Russian", "ru")}
                {LanguageOption("Deutch", "de")}
                {LanguageOption("French", "fr")}
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  );
}

function LanguageOption(label, classLabel) {
  return (
    <li
      onClick={changeTounge.bind(this)}
      data-id={label}
      data-value={classLabel}
    >
      <Link to="#nav-locations">
        <span className={"flag-icon flag-icon-" + classLabel}></span>
        {"  "}
        {label}
      </Link>
    </li>
  );
}

function changeTounge(e) {
  console.log("Write something!!");
  console.log(e.currentTarget.dataset.id);
  console.log(e.currentTarget.dataset.value);
  //setLanguage({ iso2: "lv", speak: "Latviešu" });
}

function OpsOption(pageLink, label) {
  return (
    <li>
      <Link to={"/" + pageLink}>{label}</Link>
    </li>
  );
}

function ActiveLanguage(iso2, activeLanguage) {
  return (
    <a href="#nav-languages">
      <span className={"flag-icon flag-icon-" + iso2}></span> {activeLanguage}
    </a>
  );
}

export default PrimaryNav;

import React，{useState}来自“React”；
从“react router dom”导入{Link}；
导出函数PrimaryNav（）{
const[language，setLanguage]=useState（{iso2:us，speak:English}）；
返回(


家



{选项（“房地产”、“房地产”）}
{选项（“车辆”、“车辆”）}
{选项（“求职”、“求职”）}
{选择（“个人公司”、“个人公司”）}
{option（“Inves`在这里输入代码`tInIdea”，“投资创意”）}



帮助与支持


{ActiveLanguage（language.iso2，language.speak）}

{语言选项（“英语”、“美国”）}
{LanguageOption（“英国”、“英国”）}
{语言选项（“Latviešu”，“lv”）}
{语言选项（“爱沙尼亚”，“ee”）}
{语言选项（“立陶宛”，“lt”）}
{语言选项（“俄语”、“俄语”）}
{LanguageOption（“Deutch”，“de”）}
{语言选项（“法语”、“法语”）}



);
}
函数语言选项（标签、类标签）{
返回(

{"  "}
{label}

);
}
功能更改设置（e）{
log（“写东西！！”）；
console.log（e.currentTarget.dataset.id）；
console.log（e.currentTarget.dataset.value）；
//setLanguage（{iso2:“lv”，说：“Latviešu”}）；
}
功能选项（页面链接、标签）{
返回(

{label}

);
}
函数ActiveLanguage（iso2，ActiveLanguage）{
返回(
);
}
导出默认主导航；

尝试将组件嵌套在主组件中，它们将能够访问并设置其状态。这仍然是一种功能模式

另一个选项是向子组件添加一个道具，并通过该道具传入setLanguage函数

另外，在functional react:D中不需要

changeTounge.bind.this

。通常，如果在functional react中使用

this

。。。那是一面红旗

import React, { useState } from "react";
import { Link } from "react-router-dom";

const PrimaryNav = () => {
  const [language, setLanguage] = useState({ iso2: "us", speak: "English" });
  
  const changeTounge = (e) => {
    console.log("Write something!!");
    console.log(e.currentTarget.dataset.id);
    console.log(e.currentTarget.dataset.value);
    setLanguage({ iso2: "lv", speak: "Latviešu" });
  }

  const OpsOption = (pageLink, label) => {
    return (
      <li>
        <Link to={"/" + pageLink}>{label}</Link>
      </li>
    );
  }

  const ActiveLanguage = (iso2, activeLanguage) => {
    return (
      <a href="#nav-languages">
        <span className={"flag-icon flag-icon-" + iso2}></span> {activeLanguage}
      </a>
    );
  }

  const LanguageOption = (label, classLabel) => {
    return (
      <li
        onClick={changeTounge}
        data-id={label}
        data-value={classLabel}
      >
        <Link to="#nav-locations">
          <span className={"flag-icon flag-icon-" + classLabel}></span>
          {"  "}
          {label}
        </Link>
      </li>
    );
  }
  
  return (
    <div className="primary-nav">
      <ul className="navigation">
        <li className="active">
          <Link to="/">Home</Link>
        </li>
        <li className="has-child">
          <a href="#nav-homepages">Opportunities</a>
          <div className="wrapper">
            <div id="nav-homepages" className="nav-wrapper">
              <ul>
                {OpsOption("RealEstate", "Real Estate")}
                {OpsOption("Vehicles", "Vehicles")}
                {OpsOption("JobSearch", "Job Search")}
                {OpsOption("PersonalCompany", "Personal Company")}
                {OpsOption("Inves`enter code here`tInIdea", "Invest In Idea")}
              </ul>
            </div>
          </div>
        </li>
        <li>
          <Link to="/contact">Help &amp; Support</Link>
        </li>

        <li className="has-child language">
          {ActiveLanguage(language.iso2, language.speak)}
          <div className="wrapper">
            <div id="nav-languages" className="nav-wrapper">
              <ul>
                {LanguageOption("English", "us")}
                {LanguageOption("British", "gb")}
                {LanguageOption("Latviešu", "lv")}
                {LanguageOption("Estonia", "ee")}
                {LanguageOption("Lithuania", "lt")}
                {LanguageOption("Russian", "ru")}
                {LanguageOption("Deutch", "de")}
                {LanguageOption("French", "fr")}
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  );
}





export default PrimaryNav;

import React，{useState}来自“React”；
从“react router dom”导入{Link}；
常量PrimaryNav=（）=>{
const[language，setLanguage]=useState（{iso2:us，speak:English}）；
const changeTounge=（e）=>{
log（“写东西！！”）；
console.log（e.currentTarget.dataset.id）；
console.log（e.currentTarget.dataset.value）；
setLanguage（{iso2:“lv”，说：“Latviešu”}）；
}
常量选项=（页面链接，标签）=>{
返回(

{label}

);
}
常量ActiveLanguage=（iso2，ActiveLanguage）=>{
返回(
);
}
常量语言选项=（标签，类标签）=>{
返回(

{"  "}
{label}

);
}
返回(


家



{选项（“房地产”、“房地产”）}
{选项（“车辆”、“车辆”）}
{选项（“求职”、“求职”）}
{选择（“个人公司”、“个人公司”）}
{option（“Inves`在这里输入代码`tInIdea”，“投资创意”）}



帮助与支持


{ActiveLanguage（language.iso2，language.speak）}

{语言选项（“英语”、“美国”）}
{LanguageOption（“英国”、“英国”）}
{语言选项（“Latviešu”，“lv”）}
{语言选项（“爱沙尼亚”，“ee”）}
{语言选项（“立陶宛”，“lt”）}
{语言选项（“俄语”、“俄语”）}
{LanguageOption（“Deutch”，“de”）}
{语言选项（“法语”、“法语”）}



);
}
导出默认主导航；

也许有更整洁的方法来做这些，但这似乎是可行的：

import React, { useState } from "react";
import { Link } from "react-router-dom";

export function PrimaryNav() {
  const [language, setLanguage] = useState({ iso2: "us", speak: "English" });
  return (
    <div className="primary-nav">
      <ul className="navigation">
        <li className="active">
          <Link to="/">Home</Link>
        </li>
        <li className="has-child">
          <a href="#nav-homepages">Opportunities</a>
          <div className="wrapper">
            <div id="nav-homepages" className="nav-wrapper">
              <ul>
                {OpsOption("RealEstate", "Real Estate")}
                {OpsOption("Vehicles", "Vehicles")}
                {OpsOption("JobSearch", "Job Search")}
                {OpsOption("PersonalCompany", "Personal Company")}
                {OpsOption("Inves`enter code here`tInIdea", "Invest In Idea")}
              </ul>
            </div>
          </div>
        </li>
        <li>
          <Link to="/contact">Help &amp; Support</Link>
        </li>

        <li className="has-child language">
          {ActiveLanguage(language.iso2, language.speak)}
          <div className="wrapper">
            <div id="nav-languages" className="nav-wrapper">
              <ul>
                {LanguageOption("English", "us", setLanguage)}
                {LanguageOption("British", "gb", setLanguage)}
                {LanguageOption("Latviešu", "lv", setLanguage)}
                {LanguageOption("Estonia", "ee", setLanguage)}
                {LanguageOption("Lithuania", "lt", setLanguage)}
                {LanguageOption("Russian", "ru", setLanguage)}
                {LanguageOption("Deutch", "de", setLanguage)}
                {LanguageOption("French", "fr", setLanguage)}
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  );
}

function LanguageOption(label, classLabel, setLanguage) {
  return (
    <li
      onClick={(event) => changeTounge(event, setLanguage, label, classLabel)}
      data-id={label}
      data-value={classLabel}
    >
      <Link to="#nav-locations">
        <span className={"flag-icon flag-icon-" + classLabel}></span>
        {"  "}
        {label}
      </Link>
    </li>
  );
}

function changeTounge(e, setLanguage, label, classLabel) {
  console.log("Write something!!");
  console.log(e.currentTarget.dataset.id);
  console.log(e.currentTarget.dataset.value);
  setLanguage({ iso2: classLabel, speak: label });
}

function OpsOption(pageLink, label) {
  return (
    <li>
      <Link to={"/" + pageLink}>{label}</Link>
    </li>
  );
}

function ActiveLanguage(iso2, activeLanguage) {
  return (
    <a href="#nav-languages">
      <span className={"flag-icon flag-icon-" + iso2}></span> {activeLanguage}
    </a>
  );
}

export default PrimaryNav;

import React，{useState}来自“React”；
从“react router dom”导入{Link}；
导出函数PrimaryNav（）{
const[language，setLanguage]=useState（{iso2:us，speak:English}）；
返回(


家



{选项（“房地产”、“房地产”）}
{选项（“车辆”、“车辆”）}
{选项（“求职”、“求职”）}
{选择（“个人公司”、“个人公司”）}
{选项（“Inves`e