小编eld*_*man的帖子

在 React 中根据环境（开发、阶段或产品）更改图标

我正在尝试根据环境更改网站图标，以便用户知道他们是否处于dev、stage或prod。

诸如本教程和本教程之类的教程通常展示如何基于按钮推送回调而不是通过访问env变量来更改网站图标。

关于自定义环境变量的反应文档使这看起来像是可以实现的，但我不确定如何正确访问变量env以index.html有条件地更改我的图标。

以下是我目前的尝试

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/app-icon.svg" id="favicon" />
 ...
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <script>

    //returns Uncaught ReferenceError: REACT_APP_APP_ENV is not defined
    console.log(REACT_APP_APP_ENV);
    //returns nothing
    console.log(PUBLIC_URL);
    //returns nothing
    console.log(process.REACT_APP_APP_ENV === 'dev' ? 'yep!' : 'nope!');
    //returns nothing
    console.log(process.PUBLIC_URL)

    const getFaviconEl = () => {
      return document.getElementById("favicon");
    }

    const getFaviconByEnv = (env) => {
      const favicon = getFaviconEl();
      switch (env) …

Run Code Online (Sandbox Code Playgroud)

html favicon environment-variables reactjs

eld*_*man

lucky-day

6
推荐指数

1
解决办法

3160
查看次数

Formik 表单未呈现

只是为了学习目的而设置一个基本的笨蛋形式......似乎无法渲染。没有错误。功能组件运行。只是没什么可看的...

MyForm.tsx

export const MyForm: React.FC = () => {

    console.log("MyForm has been called")
    return (

        <div>

            <Formik initialValues={{ firstName: "roberto" }} onSubmit={data => { console.log(data) }}>
                {({ values, handleChange, handleSubmit, handleBlur }) => {
                    <form onSubmit={handleSubmit}>
                        <TextField value={values.firstName} onChange={handleChange} onBlur={handleBlur} name="firstName" />
                        <pre>JSON.stringify(values)</pre>
                    </form>
                }}

            </Formik>

        </div >
    )
}

Run Code Online (Sandbox Code Playgroud)

我已将 MyForm 正确导入到 App.tsx 中，并且 MyForm 目前是我从 App.tsx 返回的所有内容。

没有错误。只是没什么...

reactjs tsx formik

eld*_*man

lucky-day

3
推荐指数

1
解决办法

1886
查看次数

创建一个函数,它接受一个对象数组并根据条件返回一个新数组

我是一个noob学习javascript.我的导师给了我这个功课.

家庭作业:编写一个函数,它接受一组对象和一个数字maxAge.每个对象都有两个属性:name,age.返回一个新的对象数组,仅包含年龄小于或等于maxAge的对象.

这是我做的:

const objectArray = [

firstObject = {
    name: "Ryan",
    age: 32
},

secondObject = {
  name: "Caroline",
  age: 1
},

thirdObject = {
  name: "Steve",
  age: 35
},

fourthObject = {
  name: "Sheila",
  age: 67
},

fifthObject = {
  name: "Ron",
  age: 67
},

sixthObject = {
  name: "deadGuy",
  age: 150
},

];



const maxAge = 67;


const makeAgeDiscrimArray = (objectArray) => {
  const ageDiscrimArray = [];
  const above67Array = [];
  const length = objectArray.length;
  for (let …

Run Code Online (Sandbox Code Playgroud)

javascript arrays

eld*_*man

lucky-day

2
推荐指数

1
解决办法

123
查看次数

更改材质 ui 复选框的边框颜色

这是我选中时的复选框：

这是我未选中时的复选框：

所有与复选框样式相关的帖子都涉及填充颜色、检查颜色等。我一定在这里遗漏了一些明显的东西 - 只是想让边框变暗！

我的代码：

<Grid item xs={12}>
  <FormControlLabel control={<Checkbox onChange={(event) => {
    console.log(event.target.checked)
    setValue('isParty', false)
  }} />} label="Party" />
</Grid>

Run Code Online (Sandbox Code Playgroud)

checkbox styling reactjs material-ui

eld*_*man

lucky-day

2
推荐指数

1
解决办法

1万
查看次数