标签: react-props

传递道具时，应该将整个对象传递到子组件中，还是应该先在父组件中单独创建道具，然后再将这些道具传递给子组件？

传递整个对象：

<InnerComponent object={object} />

单独创建首先需要的道具：

<InnerComponent name={object.name} image={object.image} />

哪一个是首选，并且取决于它，我应该使用哪个作为量规？

在我看来像是两个相似的设置，在一台机器上我被允许调用

<MyApp
        accountId={this.props.accountId}
        children={toggleButton} />

MyApp 有类签名的地方

export interface IMyAppProps {
  accountId: string;
  dispatch: any;
}
    class MyApp extends React.Component<IMyAppProps, IMyAppState> {

在另一台机器上，运行npm run-script build失败

TypeScript 构建错误 TS2322：类型“...”不可分配给类型“...”

'IntrinsicAttributes & Pick<IMyAppProps, "accountId">' 类型不存在属性 'children'

两台机器上使用的版本 react-scripts-ts 4.0.8，typescript 3.4.5。

将类定义更改为此使其在两台机器上都可以使用

class MyApp extends React.Component<React.PropsWithChildren<IMyAppProps>, IMyAppState> {

我不确定为什么它适用于一种设置而不适用于另一种设置。我什么时候把我的 props 接口包装在里面React.PropsWithChildren？

我最好的猜测是，可以在 React 或 React 相关包的类型文件中找到更改。

在我的反应应用程序中，假设我有一些父组件及其直接子组件都需要的数据。该应用程序使用 redux 进行状态管理。

现在，在子组件中，我可以使用useSelector并获取状态。但由于我已经在父级中获得了信息（如果重要的话，我也使用了useSelector），我只需将 props 传递给子级，例如<Child info={someInfo} />. 这是Child子组件，someInfo是我使用的状态信息useSelector。

useSelector我的问题是，在这种情况下我应该传递 props 还是获取子组件中使用的数据。此外，传递 props 会比使用读取更快，useSelector反之亦然吗？

我正在尝试创建一个 UserContext 以便 React 应用程序中的所有类组件都可以访问。我收到以下错误。

ReferenceError: Cannot access 'UserContext' before initialization

应用程序.js

import React, { createContext } from 'react';
export const UserContext = createContext(null);
function App() {
  return (

    <div className="App">
      <UserContext.Provider value={null}>
        <PageRoutes />
      </UserContext.Provider>
    </div>

  );
}

export default App;

登录页面.js

import React, { Component } from 'react';
import { UserContext } from './App';

class MasterLoginPage extends Component {
    static contextType = UserContext;
    constructor(props) {
        super(props);
        this.state = {
            username: null,
            loggedIn: false
        }

// logic to work …

如图中提到的传递 React Props，我想知道在 React 中传递多个 props 是否有更简洁的方法。

我有一个 Next JS 项目，其静态 JSON 放置在 /pages/api/data.json 中，如下所示：

{
 "Card": [
   { "title": "Title 1", "content": "Content 1" },
   { "title": "Title 2", "content": "Content 2" },
   { "title": "Title 3", "content": "Content 3" }
 ]
}

我试图从该 JSON 中获取内容以加载到几个部分中，如下所示：

import { Card } from "../api/data";

export const getStaticProps = async () => {
  return {
    props: { cardData: Card },
  };
};

export default ({ cardData }) => (
  <>
    const card = cardData.title; console.log(cardData);
    { {cardData.map((cardData) => ( …

我正在尝试创建一个单击事件，以便能够删除列表中的项目，但是当我单击它时，我收到“ TypeError：无法读取未定义的属性'props'”。

我试图尽可能地坚持使用ES6，我很确定它可以在某处绑定“ this”，但是我尝试了很多地方，但均未成功。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                <StreetFighter />
            </div>
        );
    }
}

class StreetFighter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            characters: [
                'Chun-Li',
                'Guile',
                'Ryu',
                'Ken',
                'E.Honda',
                'Dhalsim',
            ],
        };
    }
    render() {
        let characters = this.state.characters;
        characters = characters.map((char, index) => {
            return (
                <Character char={char} key={index} onDelete={this.onDelete} />
            );
        });
        return (
            <div>
                <p>Street Fighter Characters</p>
                <ul>{characters}</ul> …

我正在开发一个新的代码库.通常,我会在React组件中设置这样的状态:

class App extends React.Component {
    constructor() {
        super();
        this.state={
            foo: 'bar'
        }
     }
    ....

在这个新的代码库中,我看到了很多这样的:

class App extends React.Component {
    state={
        foo: 'bar'
     }
    ....

这样做是否有优势？他们似乎只在国家不需要改变时才这样做.我一直认为状态是React处理的东西.这是一件好事吗？

我有以下测试:

import React from 'react';
import { configure, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import ListAdapter from './ListAdapter'
import TweetCard from './TweetCard'


describe('<ListAdapter />', () => {
    let wrapper, props

    beforeEach(() => {
        props = {
            data: [{
                user: { profile_image_url: 'someimage.png', name: 'Some name' },
                created_at: 'Sat Feb 02 19:06:09 +0000 2019',
                text: 'Hello word'
            }],
        };
        wrapper = shallow(<ListAdapter  {...props} />);

    })

    it('renders without crashing', () => {
        expect(wrapper).toBeDefined();
    });

    it('renders …

我有一个看起来像这样的组件。这个版本完美运行：

export default function StatusMessage(isAdded: boolean, errorMessage: string) {
  if (isAdded) {
    return <ResultAlert severity="success" text="User Added" />;
  } else {
    if (errorMessage !== '') {
      if (
        errorMessage.includes('email')
      ) {
        return <ResultAlert severity="error" />;
      }
      if (
        errorMessage.includes('phone number')
      ) {
        return (
          <ResultAlert severity="error" text="" />
        );
      } 
    }
  }
}

现在，我正在尝试更改导出它的方式。我正在尝试这个：

type StatusMessageProps = {
  isAdded: boolean; 
  errorMessage: string;
}

export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({
  isAdded,
  errorMessage
}) => {

但我不断收到错误消息：

Type '({ isAdded, errorMessage }: …