小编cki*_*ris的帖子

在下面的单页案例中如何在组件之间切换？理想情况下，当您单击menu-item关联组件时，将显示相关组件而其他组件将隐藏。

反应

import React, { useState } from 'react';
import About from "./components/About";
import Projects from "./components/Projects";
import Contact from "./components/Contact";

const App = () => {
    // Toggle state(s) here?

    // Toggle function(s) here?

    return (
        <div className="nav">
            <ul className="menu">
                <li className="menu-item">About</li>
                <li className="menu-item">Projects</li>
                <li className="menu-item">Contact</li>
            </ul>
        </div>
        <div className="container">
            <About />
            <Projects />
            <Contact />
        </div>
    )
};

export default App;

在如下所示的功能性 React 组件中，如何访问从 redux 存储发送过来的 props，类似于如何访问类组件的this.propsin ，如下面的评论所示？componentDidMount()

import React from 'react';
import { connect } from "react-redux";
import * as actions from "../../actions";

const ComponentName = () => {
    // componentDidMount() {
    //    this.props;
    // }

    return (
        <div>
            <div>???</div>
        </div>
    );
};

function mapStateToProps(state) {
    return { state };
}

export default connect(mapStateToProps, actions)(ComponentName);

这个 jQuerytoggle()函数运行良好。在 vanilla javascript（首选 ES6）中执行相同操作的良好做法是什么？

$("#sign_up_btn").click(function(e) {
    $(signUpForm).toggle("hide");
    $(loginForm).toggle("hide");
});

$("#login_btn").click(function(e) {
    $(signUpForm).toggle("hide");
    $(loginForm).toggle("hide");
});

为什么会fetchData多次触发？在console.log似乎环几乎是无限？如何让它在加载时仅运行一次并在fetchData()稍后调用时仅触发一次？我在这里做错了什么或错过了什么？

const [data, setData] = useState(null);

  let fetchData = React.useCallback(async () => {
    const result = await fetch(`api/data/get`);
    const body = await result.json();
    setData(body);
    console.log(data)
  },[data])

  useEffect(() => {
    fetchData();
  },[fetchData]);

更新（附加问题）：如何在下面data的之前等待填充return()现在给出错误，因为它最初为空？：data.map is not a function

return (
    <select>
        {data.map((value, index) => {
            return <option key={index}>{value}</option>
        })}
    </select>
)

这个 javascript 对象值是一个字符串，如何将其转换为一个数组，删除外部引号，只留下括号？尝试使用obj["text-font"] = obj["text-font"].split('"').join("");不成功。

当前的

text-font: "['Open Sans Regular', 'Arial Unicode MS Regular']"

故意的

text-font: ['Open Sans Regular', 'Arial Unicode MS Regular']

我在尝试return ( <div id="info_side">{info}</div> )以下时收到错误。我有一个有效的_onClick功能，info如果我没有{info}在返回中包含任何地方，我可以控制台日志。我怎样才能解决这个问题？

这是错误： Error: Objects are not valid as a React child (found: object with keys {type, _vectorTileFeature, properties, layer, source, state}). If you meant to render a collection of children, use an array instead.

更新 必须将对象转换为数组，然后映射键值，现在它可以工作了。

const _onClick = event => {
  const display = event.features;
  if (display.length > 0) {
    setInfo(display[0].properties)
  }
}

var list = Object.entries(info).map(([key,value]) => {
  return (
    <div><span className="bold">{key}</span>: <span>{value.toString()}</span></div>
  )
});

return …