小编rea*_*tor的帖子

我有一个像这样的项目结构：

+-- node_modules
+-- package-lock.json
+-- package.json
`-- workspace-a
   `-- package.json <---includes common as a dependency
`-- common
   `-- package.json

我有Dockerfile如下：

FROM node:alpine as builder

# from monorepo root
WORKDIR /app

COPY ./package*.json ./

COPY ./common/package*.json ./common/

COPY ./workspace-a/package*.json ./workspace-a/

RUN npm config set optional

RUN npm i

# build common library
WORKDIR /app/common

COPY ./common ./

RUN npm run build

# build workspace-a using built common library as dependency
WORKDIR /app/workspace-a

COPY ./auth ./

CMD ["npm","run", "build"] …

我有一个自定义钩子，它保留了一个切换状态列表，虽然我看到内部状态与我的期望一致，但我想知道为什么一个监听这个钩子保持的状态变化的组件没有重新渲染在变化。代码如下

const useToggle = () => {
  const reducer = (state, action) => ({...state, ...action});
  const [toggled, dispatch] = useReducer(reducer, {});
  const setToggle = i => {
    let newVal;
    if (toggled[i] == null) {
      newVal = true;
    } else {
      newVal = !toggled[i];
    }
    dispatch({...toggled, [i]: newVal});
    console.log('updated toggled state ...', toggled);
  };
  return {toggled, setToggle};
};

const Boxes = () => {
  const {setToggle} = useToggle()
  return Array.from({length: 8}, el => null).map((el,i) => 
  <input type="checkbox" onClick={() => setToggle(i)}/>)
  } …

我正在尝试通过在 React 中使用 useRef 钩子来设置组件的宽度，但我显然没有理解这种模式。代码沙盒可以在这里找到：https ://codesandbox.io/s/vqn5jyv9y5 。谢谢！

import React, {useRef} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Foo />
    </div>
  );
}

const Foo = () => {
  const { current: btn } = useRef(null);
  return (
    <React.Fragment>
      <button ref={btn}>buuuuttttoooon</button>
      <div style={{ width: btn.style.width, backgroundColor: 'pink', height: '50px' }} />
    </React.Fragment>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

虽然我最终尝试为此反应路由器示例中的流程编写酶测试：https://reacttraining.com/react-router/web/example/auth-workflow

import React from 'react';
import ReactDOM from 'react-dom';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { MemoryRouter, Route, Switch, Link } from 'react-router-dom';

const Home = () => <div>Home</div>;
const MockComp = () => (
  <div className="protected">
    <nav>hi</nav>
    Protected
  </div>
);
const MockDenied = () => <div className="denied">Denied</div>;

test('Renders visited protected component if authorized', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <div>
        <Link to="/foo" />
        <Switch>
          <Route path="/" component={Home} /> …

我想知道为什么 foo 正在记录一个值，而 bar 却没有。它们在语法上似乎也相同。

编辑：这是一个 XY 问题。我的目标是获得该类的最后一个元素foo，我尝试使用last-child. 我尝试last-of-type过但没有成功。

const foo = document.querySelector(".some-element:last-child")
const bar = document.querySelector(".foo:last-child")

console.log('foo >>',foo)
console.log('bar >>',bar)

<article>
  <div class="foo">This `div` is first.</div>
  <div class="foo">This <span>nested `span` is last</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
</article>
<ul>
  <li class="some-element">1</li>
  <li class="some-element">2</li>
  <li class="some-element">3</li>
</ul>

我有这段代码，出于某种原因，当我调整窗口大小时，它会增长，但不会缩小。我想知道如何解决这个问题。

https://codesandbox.io/s/react-chartjs-2-example-1nur4

import React from "react";
import { render } from "react-dom";
import LineDemo from "./LineDemo";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <table style={{ width: "100vw", borderCollapse: "collapse" }}>
      <tbody>
        {Array.from({ length: 4 }, el => "foo")
          .concat(<LineDemo />)
          .map(el => (
            <td style={{ border: "solid" }}>{el}</td>
          ))}
      </tbody>
    </table>
  </div>
);

render(<App />, document.getElementById("root"));

我遇到了反应路由器编码空格的问题，但没有与符号的问题。所以localhost:8080/you & me被编码为localhost:8080/you%20&%20me而不是localhost:8080/you%20%26%20me，我正在使用一个奇怪的黑客来解码然后重新编码所有内容。我想知道是否有人可以推荐更好的解决方案。