标签: jsx

给出一个渲染其子代的简单组件:

class ContainerComponent extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

export default ContainerComponent;

问题:儿童道具的propType应该是什么？

当我将其设置为对象时,当我使用具有多个子元素的组件时,它会失败:

<ContainerComponent>
  <div>1</div>
  <div>2</div>
</ContainerComponent>

警告:失败的道具类型: 提供children的类型的无效道具,预期.arrayContainerComponentobject

如果我将它设置为一个数组,如果我只给它一个孩子,它将会失败,即:

<ContainerComponent>
  <div>1</div>
</ContainerComponent>

警告:失败的道具类型:提供给ContainerComponent的类型对象的无效道具子项,预期数组.

请指教,如果我不打算对儿童元素进行propTypes检查？

这是我尝试过的以及它是如何出错的.

这有效:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

这不是:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

description属性只是HTML内容的普通字符串.然而,由于某种原因,它被渲染为字符串,而不是HTML.

有什么建议？

我正在使用我的React app运行lint,我收到此错误:

error    JSX props should not use arrow functions        react/jsx-no-bind

这就是我正在运行箭头功能(内部onClick)的地方:

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

这是一个应该避免的不良做法吗？什么是最好的方法呢？

我dl在 React 中生成一个：

      <dl>
        {
          highlights.map((highlight, i) => {
            const count = text.split(highlight).length - 1;

            return (
              <>
                <dt key={`dt-${i}`}>{highlight}</dt>
                <dd key={`dd-${i}`}>{count}</dd>
              </>
            );
          })
        }
      </dl>

这给了我警告：

警告：列表中的每个孩子都应该有一个唯一的“key”道具。

这将删除警告，但不会生成我想要的 HTML：

      <dl>
        {
          highlights.map((highlight, i) => {
            const count = text.split(highlight).length - 1;

            return (
              <div key={i}>
                <dt>{highlight}</dt>
                <dd>{count}</dd>
              </div>
            );
          })
        }
      </dl>

而且我无法key向片段 ( <> </>)添加道具。

如何解决这个问题？

我正在使用 React 16.12.0。

我正在努力解决 VSCode 中的“错误”：

Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'

因此，当value 似乎有效时，react-scripts (create-react-app) 会自动将jsxkey设置为react-jsxvalue react。

实际上，代码运行良好并显示了我想要的页面，但是 IDE 将所有内容都强调为错误，并说：

Cannot use JSX unless the '--jsx' flag is provided.

这是我的 tsconfig.json ：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
} …

我在jsx中使用 标记,但它没有渲染空间.以下是我的代码的一小段.请帮忙.

var Reporting=React.createClass({

  render: function(){
    return(
      <div style={divPositionReporting}>
          <p>Pricing Reports</p>
          <hr></hr>
          Select Scenario:&nbsp;&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
          Select Takeout Scenario:&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
      </div>
    );
  },

});

在React的官方文档中提到 -

如果您熟悉React类生命周期方法,则可以将useEffect Hook视为componentDidMount,componentDidUpdate和componentWillUnmount的组合.

我的问题是 - 我们如何componentWillMount()在钩子中使用lifecyle方法？

与webstorm不同,我无法在Visual Studio Code中的.js文件中注释jsx代码.

我目前正在使用React Native构建测试应用程序.到目前为止,Image模块一直运行良好.

例如,如果我有一个名为的图像avatar,下面的代码片段工作正常.

<Image source={require('image!avatar')} />

但是,如果我将其更改为动态字符串,我会得到

<Image source={require('image!' + 'avatar')} />

我收到错误:

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

显然这是一个人为的例子,但动态图像名称很重要.React Native不支持动态图像名称吗？

我正在开发一个使用Typescript,React和Redux(都在Electron中运行)的项目,当我在另一个中包含一个基于类的组件并尝试在它们之间传递参数时,我遇到了一个问题.松散地说,我有容器组件的以下结构:

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

和子组件:

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

显然我只包括基础知识,这两个类还有更多,但是当我尝试运行看起来像有效代码的东西时,我仍然会收到错误.我得到的确切错误:

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

Run Code Online (Sandbox Code Playgroud)

当我第一次遇到错误时,我认为这是因为我没有通过定义我的道具的界面,但是我创建了它(如上所示)并且它仍然不起作用.我想知道,有什么我想念的吗？

当我从ContainerComponent中的代码中排除ChildComponent prop时,它渲染得很好(除了我的ChildComponent没有关键道具)但是在JSX Typescript中拒绝编译它.我认为它可能与基于本文的连接包装有关,但该文章中的问题发生在index.tsx文件中并且是提供者的问题,我在其他地方遇到了问题.