标签: tsx

我有一个TSX组件,它是一个包装其子代的容器,如下所示:

import * as React from "react";

interface IProps extends React.Props<Box> {
}

interface IState {
}

export class Box extends React.Component<IProps, IState> {
    render() {
        return (
            <div>
                <h3>Check this out:</h3>
                {this.props.children}
            </div>);
    }
}

我也有一些纯粹的组件,比如这个:

// ReSharper disable once InconsistentNaming - React components must start with a capital letter.
export function LabelTest(props: { label: string }) {
    return (
        <div style={{ display: "flex" }}>
            <label style={{ flex: "1 0 0" }}>{props.label}</label>
            <div style={{ width: "auto" }}>
                This is …

TL; DR

我正在使用TypeScript和React.我已经定义了我的AppContainer.tsx组件,将其导出为默认值.我在文件app.ts中使用ReactDOM它来生存它以将其呈现给目标dom元素.但我收到以下错误(见图).有关更多信息和GitHub repo的链接,请阅读以下内容.

问题:我在做什么或者解释是什么？从所有代码示例我看到这应该工作 - 但也许(显然)我错过了一些东西.以下是更多信息和完整GitHub仓库的链接.

环境

• 反应15.4.2
• 反应15.4.2
• 打字:https://github.com/aredfox/electron-starter/blob/master/typings.json
• tsconfig:https://github.com/aredfox/electron-starter/blob/master/tsconfig.json

码

文件'/components/AppContainer.tsx'

/// <reference path="../../../typings/index.d.ts" />

// Top level application component

/*------------------------------------------------------------------------------------*/
/** IMPORTS **/
import * as React from 'react';
import { Component } from 'react';
/*------------------------------------------------------------------------------------*/
/*///*/

/*------------------------------------------------------------------------------------*/
/** COMPONENT **/
export default class AppContainer extends React.Component<{}, {}> {    
    render() {
        return ( <div /> );
    }    
}        
/*------------------------------------------------------------------------------------*/
/*///*/ …

我正在尝试将这个简单的添加div到我的 .tsx 文件的返回块中：

<div id="bizible.reportUser" style="display:none" data-email="some@email.com"/>

我这样做：

import React from 'react';
import Radium from 'radium';

import Icon from './Icon';
import Header from './Header';

import Colors from '../colors';

const NoMatch = ({ children, title, icon, kind }) => {
  return ([
    <div style={[styles.base, kind && styles[kind]]}>
      <Icon name={icon} style={[styles.icon]} height="48" width="48" />
      <Header title={title} style={[styles.header]} />
      <p style={[styles.message]}>
        {children}
      </p>
    </div>,
    <div id="bizible.reportUser" style="display:none" data-email="some@email.com"/>
  ]
  );
};

但它返回一个错误消息并且不编译：

error TS2322: Type '({children, title, icon, kind}: { children: …

尝试启动 gatsby+react+typescript 项目，VSCode 只会将语法突出显示应用于我的 .tsx 文件中的 HTML。打字稿代码保持单一颜色。我该如何解决？

注意：我目前没有安装插件，如果文件类型设置为 .jsx，则突出显示有效

我正在尝试在 React TypeScript 文件中实现这一点：

export class MainInfo extends Component<IProps>{
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values1, handleChange } = this.props
    return (
      <div>
        <Formik
          validateOnChange={true}
          validationSchema={validationSchema}
          initialValues={{ Title: '', ActivationDate: '', ExpirationDate: '', DirectManager: '', HRBP: '' }}
          onSubmit={(data) => {
            console.log(data)
          }}

但是我收到一个参数 'e' 隐含一个 'any' 类型的 React TypeScript 错误。我应该如何解决这个问题？

编辑：我在另一个文件中有这些，我在这里使用它们作为道具

nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1
    });
  };

  // Go back to …

在 TSX 文件中，可以定义通用组件：

const MyComponent = <A,>() => <p>my component</p>

注意,后面的A。

现在，如果我想A默认string，人们自然会认为上面应该写成：

const MyComponent = <A=string,>() => <p>my component</p>

但这不起作用。

我缺少什么？

我正在使用glibc 2.24版本。它具有通过事务同步扩展（例如_xbegin（）和_xend（））用于pthread_mutex_lock实现的锁省略路径。我认为硬件应该支持锁定删除，因为hle CPU标志用于硬件锁定删除。我正在使用的处理器是采用Skylake架构的Intel®Xeon®Gold 6130。

首先，我想禁用Lock Elision，但是当我运行使用pthread_mutex_lock且具有perf stat -T来监视事务周期的程序时，我得到0。我认为这意味着pthread_mutex_lock根本不使用事务路径。谷歌搜索之后，我发现可能有必要先使用export GLIBC_TUNABLES = glibc.elision.enable = 1来启用锁定清除，但是在此步骤之后，我仍然看不到使用perf进行任何事务。

另一方面，当我包含_xbegin（）时；和_xend（）; 直接在此过程中，我获得了一些具有perf stat -T的交易周期，这应该意味着我希望能找到与perf匹配的计数器。

因此，有关如何启用锁定清除的任何建议都将有所帮助。还是我检查不正确？

TSX的更新我在主要功能中使用了这两条指令，就像这样：

_xbegin();
_xend();

pthread_mutex_t * mutex;
mutex = (pthread_mutex_t *) malloc(10 * sizeof(pthread_mutex_t));
for(int k=0; k<10; k++){
    pthread_mutex_init(&mutex[k], NULL);
  }