标签: react-props

我有一个名为 的可重用功能组件CardSection。我想为不同的 CardSection 组件使用不同的 flex 值。

因此，我想将 flex 的值作为 prop 传递到 CardSection 组件中。例如：

<CardSection flex='1' /> <CardSection flex='3' />

但是，如果我尝试将 flex 的键值对添加到样式对象中，则会收到错误，因为我试图flex在不可变的对象上设置一个带有值的键：

import React from 'react';
import { View } from 'react-native';

const CardSection = props => {
  styles.container.flex = props.flex;  // <---- Causes mutation error

  return (
    <View style={styles.container}>
      {props.children}
    </View>
  );
};

const styles = {
  container: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    borderColor: '#ddd',
    position: 'relative',
    borderWidth: 2,
    borderColor: 'red', …

所以，我正在使用 Vue Js，目前在子组件上显示图像时遇到了一些问题，所以，这里看起来像：

父组件：

<list>
  <post name="post 1" image="somePath"/>
  <post name="post 2" image="somePath"/>
</list>

在我们得到的子组件上

<post>
 <p> {{name}} </p>
 <img src={{somePath}} />
</post>

我尝试了多种方法，以及其他方法……到目前为止，它们都没有奏效……有什么建议吗？另外，这是我的 img 路径的样子

"@/assets/web/mock/Phonebeats.png"

我收到警告“警告：道具类型失败：Object提供给的类型无效，预期实例为bound checkType。”

这是我的道具：

FieldTable.propTypes = {
    rawData: PropTypes.instanceOf(PropTypes.object).isRequired,
    percentCols: PropTypes.arrayOf(PropTypes.string).isRequired,
    specialColNames: PropTypes.instanceOf(PropTypes.object).isRequired,
    scenarioHeaders: PropTypes.instanceOf(PropTypes.object),
    headerHierarchies: PropTypes.arrayOf(PropTypes.object).isRequired
};

它所指的“绑定检查类型”是什么，我应该如何验证我的对象道具以避免此警告？对象本身是从异步调用接收的 JSON 对象，并在其他组件中生成。例如，rawData 对象来自一个组件，该组件允许用户上传 Excel 电子表格，然后将电子表格解析为 JSON 对象。不知道这是否是有用的信息。

感谢您提供任何帮助，尤其是此问题可能引起的任何更深入的讨论。

我正在用 React 和 TypeScript 编写一个 Form 组件。我将 Formik 用于表单逻辑。我想将<Form />组件作为道具传递给特定的表单并进行渲染。这是我尝试过的：

import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactNode } from "react";

export interface Props {
  component: ReactNode; // TODO: Change to one of LoginForm or RegisterForm.
  handleSubmit(): void;
}

export class Form extends PureComponent<Props> {
  renderForm = (formikProps: FormikProps<any>): ReactNode => {
    const { component: FormComponent } = this.props;
    return <FormComponent {...formikProps} />;
  };

  render() {
    const { handleSubmit } = this.props;
    return <Formik …

目前，我有一个类组件，其中包含充当JSX中组件的功能。

例：

class MyComponent extends React.Component {
    MySubComponent = (props) => {
        if (props.display) {
            return <p>This text is displayed</p>
        }
    }

    render() {
        return (
            <this.MySubComponent display={true} />
        )
    }
}

这样调用组件有什么影响吗？还有一个术语吗？

所以这有点疯狂。我使用的一个 Web 应用程序是用 React 构建的，它做出了一些我不同意的设计决策。

幸运的是，设计实际上很简单，可以完全按照我想要的方式进行更改。我可以打开 Chrome React devtools 并更改分配给特定组件的道具。

但是我不想每次都手动执行此操作，这不值得。我想编写一个（超级hacky）个人javascript，我可以将它注入到页面中，它修改传递给这个组件的道具。

想知道是否有人知道从 React 外部注入 props 的简单技巧。也许有可能挂钩 React 用来响应开发工具的任何机制？

我试图将两个变量从组件“游戏”发送到组件“应用程序”，但我不确定如何一次发送多个道具。

这是我所拥有的：

//App Component

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      score: 0,
    }

    this.changeScore = this.changeScore.bind(this)
  }

  changeScore(newScore) {
    this.setState(prevState => ({
      score: prevState.score + newScore
    }))
  }

  render() {
    return(
      <div>
        <Game onClick={this.changeScore}/>
        <Score score={this.state.score}/>
      </div>
    )
  }
}

//Game Componenet 

class Game extends Component {

    constructor(props) {
        super(props)
        this.state = {
            score: 0,
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        console.log('Clicked')
        this.props.onClick(this.state.score)

    }

    render() {
        return(
            <div>
                <button onClick={this.handleClick}> Score Button </button>
            </div> …

好的，我已经知道一种方法来做到这一点。但是，我问这个以防我重新发明轮子，因为我对 React 非常陌生。我的印象是，如果父组件通过 props 将她的状态传递给子组件而不是更新父组件的状态，那么子组件将在需要时重新渲染。但情况似乎并非如此。我设置了这个例子，

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: props.number,
    };
  }

  updateNumber(n) {
    this.setState({number: n});
  }

  render() {
    return (<h1>{this.state.number}</h1>);
  }
}

class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      number: -1,
    };
    this.child = React.createRef();
    setInterval(this.updateState.bind(this), 1000);
  }

  updateState() {
    console.log(this.state);
    this.setState({
      number: Math.floor((Math.random() * 10) + 1),
    });
    // this.child.current.updateNumber(this.state.number);
  }

  render() {
    return (
      <div>
        <Child ref={this.child} number={this.state.number}/>
      </div>
    );
  }
}

在这个例子中，除非我明确定义一个引用并使用它来调用子级的更新函数（注释部分），否则每次更新父级的状态时都不会重新渲染子级。所以是这样吗？如果他们的父母的状态作为道具传递给他们，你是否应该手动更新你的孩子的状态（heh）或者他们应该自动更新（并因此重新渲染）。

我一直在研究一种反应形式，我需要限制用户输入特殊字符并只允许这些字符：[A-Za-z]。

我已经尝试了下面的代码，但我仍然能够插入特殊字符，例如：“?”、“>”、“+”等。

export default Component (props {
  ...
  return (
   <input 
    pattern={props.pattern}
   /> 
  )
}

我将它作为道具发送到我的表单中：

<Component 
pattern="[A-Za-z]+"
/>

你能告诉我我遗漏了什么并指出可能是什么问题吗？非常感谢。

我不确定，在下面的要求中搜索什么。我正在使用以下类型的反应道具。

interface ComponentProps {
   message : string,
   minValue? : number,
   minValueValidationMessage? :string
}

现在，我想让打字稿知道，如果minValue指定了，那么minValueValidationMessage也应该是必需的。

如果minValueValidationMessage指定，则minValue也应指定。

我有很多类似的组合，可以在任何排列和组合中发生。