标签: jsx

我为警报框编写了以下钩子：

import MuiAlert from '@material-ui/lab/Alert';
import { Snackbar } from '@material-ui/core';
import React from 'react';

export const useAlert = () => {
    const [open, setOpen] = React.useState(false);
    const [message, setMessage] = React.useState('');

    const openAlert = (message) => {
        setOpen(true);
        setMessage(message);
    };

    const closeAlert = (event, reason) => {    
        setOpen(false);
    };

    return {
        openAlert,
        Alert: <Snackbar open={open} onClose={closeAlert}><MuiAlert onClose={closeAlert}>{ message }</MuiAlert></Snackbar>
    };
};

我将此钩子集成到其他功能组件中，如下所示：

import { useAlert } from './useAlert';

const Dashboard = () => {
    const { openAlert, Alert } …

我有一个包含对象的数组.我正在创建此数组的映射以使用span组件呈现名称.

let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];

我一直在使用以下两个不同的功能来迭代该对象数组,并使用map来呈现JSX元素.

Functionality1:

import React, { Component } from 'react';
class App extends Component {

  render() {
    let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];
    const items = data.map((key, i) => {
      return <span key={key.id}>{key.name}</span>;
    });
    return (
      <div>
        {items}
      </div>
    );
  }
}

export default App;

Functionality2:

import React, { Component } from 'react';
class App extends Component {

  render() {
    let data …

我需要在组件存储在变量中之后设置它的道具,这里是伪代码:

render(){

    let items = [{title:'hello'}, {title:'world'}];
    let component = false;

    switch (id) {
      case 1:
        component = <A />
        break;
      case 2:
        component = <B />
        break;      
    }

    return(
      items.map((item, index)=>{
        return(
          <span>
            {/* SOMETHING LIKE THIS WOULD BE COOL - IS THAT EVEN POSSIBLE*/}
            {component.props.set('title', item.title)}
          </span>11

        )
      })
    )
  }

在里面return我运行一个循环,我需要为存储在变量中的组件设置道具....如何设置我之前存储在变量中的组件的道具？

我在ReactJs组件上使用jQuery fullcalendar.

我有一个 <div id="calendar"></div>渲染方法

在componentDidUpdate上,我使用以下代码更新了日历:

$('#calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},

events: _this.state.events,
defaultView:'month',
displayEventTime: false,
editable: false,
droppable: false,
durationEditable: false
});

它在标题上显示"未定义"字符.我哪里做错了？以及如何调试未定义字符串的来源？

目前,我做了一个被黑客攻击的解决方案,通过添加以下内容从标题中删除所有未定义的字符串:

viewRender: function(view, element) {
//note: this is a hack, i don't know why the view title keep showing "undefined" text in it.
//probably bugs in jquery fullcalendar
$('.fc-center')[0].children[0].innerText = view.title.replace(new RegExp("undefined", 'g'), ""); ;

},

还有更好的解决方案吗？

我正在使用jquery FullCalendar v2.9.1

以下有关事件的示例数据:

[{"start":"2017-03-24T00:00:00.000Z","end":"2017-03-26T00:00:00.000Z","title":"Open house","description":"Bali 1 open house"}]

注意:我最终倾倒了jquery完整日历,转而使用react-big-calendar.

我的团队正在使用React,Typescript,TSX和Webpack创建CMS的管理面板.管理面板的每个页面都已创建为React组件,每个页面包含许多其他子组件(每个部分一个).

CMS发行版目前包含运行Web应用程序所需的javascript的捆绑版本,但不包括原始TSX文件.

现在,我们希望使用我们的CMS来扩展Web应用程序的开发人员

1)使用"槽填充"方法将其他部分注入UI

2)可能甚至覆盖现有部分,在同一个地方渲染不同的组件.

<div>
  <SidebarComponent />
  <Section1Component />
  <Section2Component />
  // How to inject a  possible PluginComponent here?
</div>

从我们迄今为止进行的研究来看,似乎没有"官方"方法来做到这一点,所以我想知道在这种情况下最好的方法是什么.

我有一个React项目,我正在从JS转换为TS.我遇到的一个问题是TSX React假设功能组件中定义的所有属性都是必需的道具.

// ComponentA.tsx
class ComponentA extends React.Component<any, any> {
  render() {
    /* Type '{ equalWidth: true; children: Element[]; }' is not assignable to type '{ children: any; className: any; equalWidth: any; }'.
     * Property 'className' is missing in type '{ equalWidth: true; children: Element[]; }'.' */
    return <ComponentB equalWidth />
  }
}

和

// ComponentB.js
const ComponentB = ({ children, className, equalWidth }) => {
  return (...)
}

有没有办法向TS发信号通知JSX组件道具都是可选的？

我试图const def = (props) => {在下面的示例代码中修复此lint错误.

const propTypes = {
prop1: PropTypes.string,
prop2: PropTypes.string,
prop3: PropTypes.string,
prop4: PropTypes.string,
prop5: PropTypes.string,
}

const abc = (props) => {
some code here }

const def = (props) => {
<div>
<div className=" ..some classes..">{abc}</div>
<div className=" ..some classes..">{t('translation/something')}</div>

<div ...>
  <someComponent 
    do something
  />

if (some condition) {
do this
} else {
do that
}

</div>

};

知道为什么我得到这个lint错误？

{props.stories.map((story) =>
    <div key={story.id}>
        {story = story.story}
        <SliderItem story={story} />
    </div>
)}

上面的代码抛出一个错误说：

Uncaught (in promise) Error: Objects is not valid as a React child (found: object with keys

因为story第 3 行是一个对象。

我可以直接将该条件移动为<SliderItem story={story.story} />，但我想知道是否有任何方法可以将我的计算值分配给一个变量并在 JSX 中使用它？

我想应用一些逻辑，例如：

{ let storyObj = story.type === 'story' && story.story ? story.story : story }

我正在关注 O'Reilly 的“Learning React”的第 5 章“React with JSX”。

我编写了 Recipes Appcreate-react-app作为基础。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import App from './App';
import Menu from './Menu';

import registerServiceWorker from './registerServiceWorker';

import data from './data/recipes';

window.React = React;

ReactDOM.render(<Menu recipes={data} />, document.getElementById('root'));

registerServiceWorker();

菜单.js

import Recipes from './Recipes';

const Menu = ({recipes}) => (
    <article>
        <header>
            <h1>Delicious Recipes</h1>
        </header>
        <div className = "recipes">
        {recipes.map((recipe, i)=>    
            <Recipes key={i} {...recipe}  />
        )}
        </div>
    </article>
);

export default …

使用foo作为属性抛出一个错误：

// App.tsx
//                      throws
const App = () => <div foo></div>

export default App

Type '{ foo: true; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'foo' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

但使用foo-foo是好的，为什么呢？

// App.tsx
//                      no error is thrown
const App = () => <div foo-foo></div>

export default App

最重要的是，如何在 TypeScript 中定义这样的类型？即只允许标准或 kebab-case 属性。