标签: jsx

我有一个使用渲染组件的javascript数组array.map.我将此数组切换为es6 Map,以便能够使用键值对更轻松地查找项目,并通过Map 从a切换.map到a forEach.在forEach我内部调用一个返回React组件的render方法,但它没有被渲染.如何在里面渲染组件forEach？

<div className='gallery__items'>
    {resultsByGuid.forEach((result, index) => {
        key++;
        this.renderGalleryItem(result, key);
    })} 
</div>

这是renderGalleryItem方法:

renderGalleryItem = (item, index) => {
    const { gridItemSelected, itemThumbnailRequested } = this.props;
    return (<GalleryItem key={index}
        item={item}
        onClick={gridItemSelected}
        fetchThumbnailFunc={itemThumbnailRequested}
    />);
};

我明白forEach不返回任何东西,但这是否意味着我无法在其中渲染？

#1

你好.我有代码:

class Component extends React.Component
{
  render()
  {
    this.props.nested.prop = this.props.parse.nested.prop;
    return <div>Component</div>;
  }
  componentDidMount()
  {
    console.log(this.props.nested.prop);
  }
}
Component.defaultProps = 
{
  nested:
  {
    prop: "default"
  }
};

const obj1 = 
{
  nested:
  {
    prop: "obj1"
  }
};
const obj2 = 
{
  nested:
  {
    prop: "obj2"
  }
};

class Application extends React.Component
{
  render()
  {
    return (
     <div>
        <Component parse={obj1}/>
        <Component parse={obj2}/>
    </div>
    );
  }
}

React.render(<Application />, document.getElementById('app'));
//console output:
//"obj2"
//"obj2"

为什么我为每个组件获得2个独立组件的1个变量引用而不是2个nested的nested.prop？为什么this.props在安装后只保存组件的所有实例的最后设置值？这是正常的行为吗？我认为正确的行为是针对不同的实例具有不同的属性值.

PS我在这里测试了这段代码.

#2

jimfb …

我曾多次尝试使用<Form>和<FormControl>组件.每次我使用我都会得到相同的错误:

"warning.js？8a56:45警告:React.createElement:type不应该是null,undefined,boolean或number.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).检查render方法的App."

"Uncaught Invariant Violation:元素类型无效:期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined.检查render方法App."

即使有这个基本的例子:

import React, {Component} from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';

export default class App extends Component {
  render() {
    return (
      <form>
        <FormGroup controlId="formControlsText">
          <ControlLabel>Text</ControlLabel>
          <FormControl type="text" placeholder="Enter text" />
        </FormGroup>

        <Button type="submit">
          Submit
        </Button>
      </form>
    );
  }
}

有任何想法吗？

我想在 TypeScript 中使用 JSX 语法，但不想使用 React。

我在这里看到了其他相关问题的答案，但没有任何内容足够完整或详细，无法提供任何帮助。我已经阅读了本指南和手册中的JSX 章节，但没有多大帮助。我不明白语言功能本身是如何工作的。

我尝试检查 React 声明，但它对我来说太大了，无法吸收 - 我需要一个最小的、有效的示例来演示类型检查的元素、组件和属性。（它不需要工厂函数的有效实现，我最感兴趣的是声明。）

我至少想要一个能够实现以下工作且具有类型安全性的示例：

var el = <Ping blurt="ya"></Ping>;

var div = <div id="foo">Hello JSX! {el}</div>;

JSX.IntrinsicElements我想我至少需要声明createElement()某种工厂函数，但这就是我所得到的：

declare module JSX {
    interface IntrinsicElements {
        div: flurp.VNode<HTMLDivElement>;
    }
}

module flurp {

    export interface VNode<E extends Element> {
        id: string
    }

    export function createElement<T extends Element>(type: string, props?: any, ...children: (VNode<Element>|string)[]): VNode<Element> {
        return {
            id: props["id"]
        };
    }
}

class Ping {
    // …

在下面的示例中，x 和 y 的输出相同。我见过两种方式编写的 React 代码。有区别吗？由于我看到的许多 React 代码示例都使用括号语法，因此我认为这是有原因的。如果这是最佳实践，那么为什么用括号将分配给变量的 JSX 括起来是最佳实践？如果还有其他原因是什么？

let x =  <div> Hello World! </div>;
let y = (<div> Hello World! </div>);

console.log(x,y);

<div style={{display: 'grid'}}>
    <button id='plus' onClick={???}>+</button>
    <input id='selectImage' type="file" onChange={fileSelectHandler} />
</div>

在这里，我想通过单击按钮来触发输入的 onChange 功能。如何解决这个问题？

当您想在其中使用外部 URL 和HTML Button 标记时，一个简单的Link组件在Next.js中不起作用，我感到非常惊讶。

您可以在下面看到我如何尝试解决问题：

方法一：

<Link href="https://stackoverflow.com/">
  <button>StackOverflow</button>
</Link>

方法 2（无协议链接）：

<Link href="//stackoverflow.com/">
  <button>StackOverflow</button>
</Link>

方法 3（没有协议的链接，并且链接属性prefetch设置为falseor even true）：

<Link href="//stackoverflow.com/" prefetch={false}>
  <button>StackOverflow</button>
</Link>

重要的提示

当然，提到的情况下，当 URL 是内部的时它可以工作，就像这样：

<Link href="/stackoverflow">
  <button>StackOverflow</button>
</Link>

或者当我将 HTML 按钮标签更改为HTML A 标签时，如下所示：

<Link href="//stackoverflow.com/">
  <a>StackOverflow</a>
</Link>

就我而言，我想在 Next.js Link 组件中使用 HTML 按钮标记或任何其他 UI 组件。

我的问题是我正在尝试处理输入的值，用户通过 API 调用定义他想要的输入。

这是我获取值的地方：

 const handleClick = buttonTitle => async () => {
    await renderField(buttonTitle).then(response => {               
      navigation.navigate('FormScreen', {
        collectionKey: buttonTitle.slice(7),
        paramKey: JSON.stringify(response),
      });     
  });
  };

渲染字段是一个 API 调用，它返回我{"message": [{"_id": "618e4c23db08f70b719f3655", "author": "adicionarei posteriormente", "ceatedAt": "2021-11-12 08:12:32", "field": "abc", "fieldtype": "Text"}, {"_id": "618e4c9ddb08f70b719fae37", "author": "adicionarei posteriormente", "ceatedAt": "2021-11-12 08:14:35", "field": "Animal", "fieldtype": "Text"}]}

然后我有我的 Form 组件，我在其中获取一些需要的组件并向用户显示：

const FormScreen = ({route, navigation}) => {
  return (
    <Container>
      <InputBody route={route.params.paramKey} navigation={navigation} />
    </Container>
    // => handle submit Input it in here …

我正在开发一个使用 React + coreui 开发的项目，该项目一直运行良好。然而，上周我在部署修改时遇到了一个莫名其妙的问题。

18:03:11  Creating an optimized production build...
18:04:32  Failed to compile.
18:04:32  
18:04:32  /var/lib/jenkins/workspace/deploy-sandbox/src/AppRouter.tsx
18:04:32  Type error in /var/lib/jenkins/workspace/deploy-sandbox/src/AppRouter.tsx(47,6):
18:04:32  'Router' cannot be used as a JSX component.
18:04:32    Its instance type 'BrowserRouter' is not a valid JSX element.
18:04:32      The types returned by 'render()' are incompatible between these types.
18:04:32        Type 'React.ReactNode' is not assignable to type 'import("/var/lib/jenkins/workspace/deploy-sandbox/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.  TS2786
18:04:32  
18:04:32      45 | 
18:04:32      46 |   return (
18:04:32    > 47 |     <Router>
18:04:32         | …

我在公共文件夹中有一张背景图片，名为bg.png

在页面文件夹的index.js页面中，我想使用该图像作为背景图像

我已经按照他们的官方网站的文档安装了 tailwind 。

我已经尝试过这个，但它不起作用。

从“../public/bg.png”导入BG；

return (
  <div
    className="bg-scroll"
    style={{
      backgroundImage: `url(${BG})`,
      height: "972px",
    }}
  >
  </div>
)

它不显示图像。