小编joh*_*pin的帖子

如何检查复选框数组中的复选框是否使用复选框数组的ID进行检查？

我使用以下代码,但无论id如何,它总是返回已选中复选框的计数.

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

我指的是 React Material-UI 的文档（https://material-ui.com/components/autocomplete/）。

在演示代码中，

    <Autocomplete
      options={top100Films}
      getOptionLabel={(option: FilmOptionType) => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />

我知道它是如何工作的，但我不确定我应该如何获得选定的值。

例如，我想为此使用onChange道具，以便我可以根据选择进行一些操作。

我尝试添加 onChange={v => console.log(v)}

但v没有显示与所选值相关的任何内容。

通过使用$:语法声明它们来使用反应变量时，您会收到以下错误。

Cannot access 'variable_name' before initialization

这是代码：

App.svelte

<script>
    import { ledzep, redhotchilis } from './data.js'
    
    $: bandmembers = [...ledzep, ...redhotchilis]
    
    let namesWithA = bandmembers.filter(d => {
            if (d.indexOf('a') > 0) {               
                return true;
            }
        else {
            return false
        }
    })
    
</script>
<h2>Band Members</h2>
<ul>
{#each bandmembers as member}
    <li>{member}</li>
{/each}
</ul>

<h2>Members with "A" in their names</h2>
<ul>
{#each namesWithA as member}
    <li>{member}</li>
{/each}
</ul>

数据.js

export const ledzep = ["Jimmy Page", "John Bonham", "Robert Plant", "John …

我经常按照“类架构”编写功能组件，其中所有与组件相关的函数都像类中的方法一样写在其中。

例如，我这里有一个counterAsFloat与Counter组件相关的函数。如您所见，我只是在组件内部编写了它：

export default function Counter() {
  const [counter, setCounter] = React.useState(0);

  const counterAsFloat = () => {
    return counter.toFixed(2);
  };

  return (
    <div className="counter">
      <h1>{counterAsFloat()}</h1>
      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
  );
}

但实际上我也可以只在组件外部声明函数并使用它的参数：

const counterAsFloat = (counter) => { 
  return counter.toFixed(2);
};

export default function Counter() {
  const [counter, setCounter] = React.useState(0);

  return (
    <div className="counter">
      <h1>{counterAsFloat(counter)}</h1>
      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
  );
}

那么在功能组件之外编写函数有什么好处或坏处吗？

我知道已经有很多关于dependency和之间的区别的帖子devDependency，但我没有找到任何解释 svelte 情况的帖子，所以让我们在这里打开这个。

在大多数 svelte 软件包（如svelte-material-ui或svelte-routing ）中，安装指南告诉您将软件包安装为dependency. 但是，由于 svelte 将在构建期间编译此包，因此使用它的新库不需要安装此 svelte 包。所以我不明白为什么它必须是一个dependency.

也许这个问题是基于意见的，但至少对使用什么有一个小小的想法会很好。

官方 ReactJs 文档建议按照点符号创建组件，如React-bootstrap库：

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
  </Card.Body>
</Card>

借助类组件很容易创建此结构：

const CardBody = ({ children }) => <div className='body'>{children}</div>;

class Card extends Component {
  static Body = CardBody;

  render() {
    return (
      <div className='card'>{this.props.children}</div>
    );
  }
}

但也建议尽可能多地使用功能组件。不幸的是，我不知道如何仅使用功能组件来实现这一点。

如果我按照这种方式，我就不能再Card用作组件了，因为他现在是组件的对象：

const Card = {
  Component: CardComponent,
  Body: CardBody
}

export …

我正在使用 React 路由器根据特定的 url 呈现我的不同页面。不，我想使用React.lazy来延迟加载我所有的页面组件：

import React from "react";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

const Page = React.lazy(() => {
  return import("./Page");
});

const App = () => {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading page...</div>}>
        <Switch>
          <Route exact path="/">
            <h1>Home</h1>
            <Link to="/page">Go to another page</Link>
          </Route>

          <Route path="/page" component={Page} />
        </Switch>
      </React.Suspense>
    </Router>
  );
};

export default App;

这项工作非常好，但是当我转到 时，我的/page所有内容都Home消失了，我只能看到后备Loading page...组件（页面消失然后另一个页面很快出现，这让用户感到不安）。

这是默认的行为，React.Suspense但有在这种情况下，一种方法来保持呈现在屏幕上的实际主页用的 …

我想通过单击某个按钮来调用 Svelte 应用程序中的 onMount，但出现此错误。任何想法都会很棒，谢谢:)

我的错误首先与此处描述的错误完全相同。我正在使用@svgr/webpack包将我的.svg文件作为这样的 React 组件导入：

import Shop from './icons/shop.svg'

return <Shop />

它在我的应用程序上运行良好，但是当我尝试在Storybook 中执行相同操作时，出现此错误：

无法在“文档”上执行“createElement”：提供的标签名称 (“static/media/shop.61b51e05.svg”) 不是有效名称。

所以我将加载器添加到我的.storybook/main.js文件中以扩展默认的 Storybook webpack 配置：

// ...
webpackFinal: async config => {    
    config.module.rules.push({
      test: /\.svg$/,
      enforce: 'pre',
      loader: require.resolve('@svgr/webpack'),
    });

错误仍然发生，因此我尝试按照上一个问题.svg的答案中的建议覆盖文件的默认 Storybook 测试：

const fileLoaderRule = config.module.rules.find(rule => { rule.test !== undefined ? rule.test.test('.svg') : '' });
fileLoaderRule.exclude = /\.svg$/;

但是后来我收到了这个错误：

类型错误：无法设置未定义的属性“排除”

所以，我决定做一个console.log的rule.test和奇怪的故事书，从未来配置的唯一默认的测试论文：

{
  test: /\.md$/,
  ... …

官方 ReactJs 文档建议按照点符号创建组件，如React-bootstrap库：

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
  </Card.Body>
</Card>

感谢这个问题，我知道我可以使用功能组件来创建这个结构，就像在 javascript 中一样：

const Card = ({ children }) => <>{children}</>
const Body = () => <>Body</>

Card.Body = Body

export default Card

使用 TypeScript，我决定向其中添加相应的类型：

const Card: React.FunctionComponent = ({ children }): JSX.Element => <>{children}</>
const Body: React.FunctionComponent = (): JSX.Element => <>Body</>

Card.Body …