标签: react-props

我的按钮样式组件的 PropTypes 有以下代码

export type Props = {
  size?: 'small' | 'medium' | 'large',
};

StyledButton.defaultProps = {
  size: 'medium',
};

它工作正常，但后来我想包含 HTMLButtonElement 道具来为我的按钮提供交互性。因此我添加了这个：

export type Props = React.HTMLProps<HTMLButtonElement> & {
  size?: 'small' | 'medium' | 'large',
};

StyledButton.defaultProps = {
  size: 'medium',
};

然而，这个改变却让defaultProps抱怨不已。这就是我收到的错误。

Types of property 'size' are incompatible.
    Type 'string' is not assignable to type 'undefined'.ts(2322)

但是，如果我去掉 React.HTMLProps，它会起作用，但这不是我想要的。有人知道这个问题的解决方案吗？

提前致谢。

我似乎在谷歌上找不到任何关于此的信息...很可能它就在那里，但我只是没有在谷歌上搜索正确的东西。我只是不断寻找我已经为一个道具所做的事情。

我目前有基于道具和状态的样式。它们按预期工作。但我发现自己处于这样一种情况：我需要一种同时需要两个道具（真/假）才能获得所需结果的样式。

我想知道这是否可能？

以下作品：

${({ prop1 }) => !prop1 &&`
    // Some Styles when !prop1
`};

${({ prop2 }) => prop2 &&`
    // Some Styles when prop2
`};

我想做的是如下所示：

${({ prop1, prop2 }) => !prop1, prop2 &&`
    // Some Styles when !prop1 && prop2
`};

或者

${({ prop1 && prop2 }) => !prop1 && prop2 &&`
    // Some Styles when !prop1 && prop2
`};

但这似乎并不想起作用。我不认为我离得很远......也许我是？任何帮助都会很棒！

多谢。

我正在使用 Ant Design for React Js UI。我使用树组件显示在列表中。我还有 2 个按钮来展开和折叠树列表。我使用defaultExpandAll属性来管理它。在展开和折叠按钮上单击我分别将布尔值设置为 true 和 false。按钮在单击按钮时不会展开。如果我最初将 True 设置为该标志状态，它就会起作用。有什么解决办法吗？

我有 2 个组件。（展开和折叠按钮位于父组件中）

**Parent Component**

    setExpandOrCollapse(value) {
        this.setState({ expandOrCollapse: value });
      }

    <HeaderRow>
                  <Button onClick={() => this.setExpandOrCollapse(true)}>Expand All</Button>
                  <Button onClick={() => this.setExpandOrCollapse(false)}>Collapse All</Button>
                </HeaderRow>

    <Card>
                  {ItemTree && (ItemTree.length > 0) ? (
                    <ItemTree
                      dataSource={ItemTree}
                      expandOrCollapse={expandOrCollapse}
                    />
                  ) : null }
                </Card>

**Child Component**
<Tree
      draggable={isDraggable}
      defaultExpandAll={expandOrCollapse}
    >
      {loopitemNodes(dataSource)}
    </Tree>

dataSource是从Redux api调用中获取的。

有什么解决办法吗？

经过几个小时的阅读如何绑定它后我放弃了。这是我第一次使用 React，我在 stackoverflow 上查看了 20 多个相关问题，但无法解决我的问题。

我已经按照指南安装了react-multi-carousel组件。

我只是复制并粘贴了常见用法代码，但我收到了这个恼人的错误：

TypeError: Cannot read property 'props' of undefined
Index
src/views/Index.js:107
  104 | responsive={responsive}
  105 | ssr={true} // means to render carousel on server-side.
  106 | infinite={true}
> 107 | autoPlay={this.props.deviceType !== "mobile" ? true : false}
      | ^  108 | autoPlaySpeed={1000}
  109 | keyBoardControl={true}
  110 | customTransition="all .5"

我尝试遵循我找到的几乎所有答案（主要绑定 this），但没有成功。

这是我的代码：

import React from "react";

// reactstrap components
import {
  Container
} from "reactstrap";


import Carousel from 'react-multi-carousel'; …

react-hook-form我正在尝试在当前项目中创建表单验证。我已经尝试过不同的方法，但总是因为属性而出错ref。如果我将 更改<FormField>为input，它就会开始工作。知道如何解决这个问题吗？

接触

import React from 'react';
import { useForm } from "react-hook-form";
import FormField from '../../components/FormField';
import Button from '../../components/Button';

const Contact = () => {
    const { handleSubmit, register, errors } = useForm();
    const onSubmit = values => console.log(values);

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <FormField
                name="email"
                onChange={() => { console.log("changed!") }}
                ref={register({
                    required: "Required",
                    pattern: {
                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                        message: "invalid email address"
                    }
                })}
            />
            <p style={{ color: "red" }}>
                {errors.email && …

我在获取 getStaticProps 函数将返回的 props 传递到 NextJS 中的模板页面时遇到一些问题。

这是我目前的动态页面模板的代码。

// src/pages/blog/[slug].js
import React from 'react';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';

import Layout from '../../components/layout';

export default function BlogPost ({frontmatter, markdownBody}){
    console.log(`in template Layout: ${frontmatter.title}`)
    // Output: TypeError: Cannot read property 'title' of undefined
    return (
        <Layout>
            <h1>{frontmatter.title}</h1>
            <span>{JSON.stringify(markdownBody)}</span>
        </Layout>
    )
}

export async function getStaticProps({...ctx}){

    const {slug} = ctx.params;
    console.log(slug)
    // output: first post (this is correct)
    const content = await import(`../../posts/${slug}.md`)
    const data = matter(content.default)
    console.log(`In getStaticProps: …

我有一个组件<Ren1 text="Line1\nLine2\nLine3" />...

function Ren1({text}){
  return <p>{text}</p>;
}
export default Ren1

\n当来自数据库时，如何添加换行符？

所需输出：

Line1
Line2
Line3

预先感谢您的帮助

我目前正在根据值渲染两个不同的组件shouldRenderPlanA- 然而，尽管渲染了不同的组件（取决于值） - 我传递了两个相同的道具。我怎样才能压缩它以减少重复的代码？

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => (
        shouldRenderPlanA ? (
          <StyledLabelOptionOne
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        ) : (
          <StyledLabelOptionTwo
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        )
      ))}
    </StyledRow>
  </>
);

 <Link to={{pathname:"/Watch", movie:movie}} >

using this to pass props over Watch page but can't get any value.

我是新手，所以可能会出现愚蠢的错误或信息不足。请让我知道任何额外信息

我无法从NativeBase更改缩略图的默认大小。我可以显示默认的圆，即小和大的圆，但是我想显示比默认尺寸大的圆。这是我的缩略图代码：

<Thumbnail size={200} style={{margin: 30}} source={require('../../../public/images/profile/yellow.jpg')} />

道具大小无效，缩略图仍然很小。

我的NativeBase版本：2.3.5