小编Aud*_*ong的帖子

我正在学习 TypeScript，有些东西让我感到困惑。一位如下：

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

const PrintName2 = (props: Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

对于上面的两个功能组件，我看到 TypeScript 生成了相同的 JS 代码。PrintName2就可读性而言，该组件对我来说似乎更加精简。我想知道这两个定义之间有什么区别，是否有人在使用第二种类型的 React 组件？

我检索了存储useState在对象数组中的数据，然后将数据输出到表单字段中。现在我希望能够在我输入时更新字段（状态）。

我见过关于人们更新数组中属性状态的例子，但从来没有更新过对象数组中的状态，所以我不知道该怎么做。我已经将对象的索引传递给回调函数，但我不知道如何使用它更新状态。

// sample data structure
const datas = [
  {
    id: 1,
    name: 'john',
    gender: 'm'
  }
  {
    id: 2,
    name: 'mary',
    gender: 'f'
  }
]

const [datas, setDatas] = useState([]);

const updateFieldChanged = index => e => {
  console.log('index: ' + index);
  console.log('property name: '+ e.target.name);

  setData() // ??
}

return (
  <React.Fragment>
    {datas.map((data, index) => {
      <li key={data.name}>
        <input type="text" name="name" value={data.name} onChange={updateFieldChanged(index)} />
      </li>
    })}
  </React.Fragment>
)

我Material-UI在我的项目中使用，我在控制台中收到警告：

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

虽然没有直系后裔，

<form>
  <TextField
    label="Title"
    value={title}
    onChange={this.handleChange("title")}
    className={classes.formControl}
    margin="normal"
  />
  <br />
  <FormControl className={classes.formControl}>
    <InputLabel>Muscles</InputLabel>
    <Select
      value={muscles}
      onChange={this.handleChange("muscles")}
    >
      {categories.map((category, index) => {
        return (
          <MenuItem key="index" value={category}>
            {category}
          </MenuItem>
        );
      })}
    </Select>
  </FormControl>
  <br />
  <TextField
    multiline
    rows={4}
    label="Description"
    value={description}
    onChange={this.handleChange("description")}
    className={classes.formControl}
    margin="normal"
  />
</form>

这是沙盒链接：

https://codesandbox.io/s/react-material-ui-0yqeo

如果我有一个名为my_project的存储库，并在几周内进行了大量提交，我在 GitHub/GitLab 上的贡献历史记录（两者都应该如此），主页配置文件将如下所示：

如上所述，您可以在贡献面板中看到不同的提交，深色代表更多，浅绿色代表更少，灰色代表没有对存储库的提交。

如果我删除回购协议，这一切都会变成灰色吗？正如我的登陆页面上该图的提交历史记录将所有这些彩色单元格从绿色变为灰色一样，因为不再有与这些提交相关的存储库。

我问这个的唯一原因是因为我已经创建了一个我不再需要的存储库，并且正在使用它来测试一些 python 和 git，但是如果我删除该存储库，我担心我的个人资料将显示我没有做出任何贡献过去一个月在 GitHub/GitLab 上，但我已经删除了，只是我想删除该项目，因为不再需要它了。

任何帮助表示赞赏！

我是离子框架的新手：

启动离子应用程序时收到以下警告。请提出修复建议：

[ng] One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
[ng] Ignored browsers: chrome 60
[ng] - Generating browser application bundles (phase: setup)...
[ng]     TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility

提前致谢。

我的.browserslistrc有以下条目：

Chrome >=60 …

我已经查看了许多文档和示例，但我似乎仍然不太明白如何forwardRef在 React Native 中使用带有 TypeScript 的功能组件。下面是一个示例，我MyCustomComponent使用自定义函数创建一个，我尝试通过创建引用从父级调用该函数。但是，由于 ref 定义不正确null，我显然收到一条错误消息，告诉我该函数不存在。请帮助我了解如何forwardRef在 React Native 中正确使用。提前致谢！

interface MyCustomComponentProps {
  title: string
}

const MyCustomComponent: React.FunctionComponent<MyCustomComponentProps> = React.forwardRef((props, ref) => {
  const coolAlert = () => {
    Alert.alert('Hey!', 'This was called from MyCustomComponent')
  }
  return (
    <View>
      <Text>{props.title}</Text>
    </View>
  )
})

export default function App () {
  const MyCustomComponentRef = useRef()
  return (
    <SafeAreaView>
      <MyCustomComponent ref={MyCustomComponentRef} title='Hello World' />
      <TouchableOpacity
        onPress={() => {
          MyCustomComponentRef.coolAlert()
        }}>
        <Text>Click Me</Text>
      </TouchableOpacity> …

目前，三个不同的存储库需要将某些内容作为单个事务进行处理。

我的服务代码写如下。但与我想象的不同，每个存储库都生成自己的事务。我怎么解决这个问题？

// TrimService

@Injectable()
export class TrimService {
    constructor(
        private readonly trimRepository: TrimRepository,
        private readonly tireRepository: TireRepository,
        private readonly userRepository: UserRepository
    ) {}

    async saveUserTrim(saveUserTrimDto: SaveUserTrimDto, res) {
        const queryRunner = await getConnection().createQueryRunner();
        await queryRunner.startTransaction();

        try {
            const findUser: User = await this.userRepository.findUser(
                saveUserTrimDto.id,
                queryRunner.manager
            );

            const createTrim: Trim = await this.trimRepository.saveUserTrim(
                findUser,
                saveUserTrimDto.trimId,
                queryRunner.manager
            );

            await this.tireRepository.saveTrimTire(
                createTrim,
                res,
                queryRunner.manager
            );

            await queryRunner.commitTransaction();
            return createTrim;
        } catch (err) {
            console.log(err);
            await queryRunner.rollbackTransaction();
        } finally {
            await queryRunner.release();
        } …

我通常使用react-to-print（https://www.npmjs.com/package/react-to-print）来打印React组件，既省力又灵活。我开始使用 TypeScript 编写应用程序，这是我第一次需要将这两件事结合起来。

这是我的代码：

<ReactToPrint
  trigger={() => <Button variant="contained" color="primary">Generar</Button>}
  content={() => componentRef.current}
/>
<PrintableComponent ref={componentRef} />

要创建参考，我只需执行以下操作：

const componentRef = useRef();

在 JavaScript 中，它可以工作，但是当我使用时.tsx，我在 ReactToPrint 组件的“content”参数中收到一个错误，在我自己的 PrintableComponent 的 ref 参数中收到另一个错误。有人可以帮我解决这个问题吗？

基本上，错误表明接口不匹配。

是否可以创建具有某些升序/降序字段的唯一索引，以便结果是这样的？

CREATE UNIQUE INDEX "IDX_article_version_latest" ON "public"."article" ("uuid" ASC, "version" DESC, "updatedAt" DESC)

我试图建立一个约定来忽略任何遵循某种模式的测试。如果你想让 jest 在 npm 测试期间忽略它，文件名将如下所示。

DISABLED.MyComponent.test.js

尝试使用 testPathIgnorePatterns

testPathIgnorePatterns: ['<rootDir>/src/**/DISABLED.{*}.js'],

错误是它仍在运行，或者抛出正则表达式无效的错误。