反应：将道具传递给功能组件 [英] React: Passing down props to functional components

问题描述

关于道具和功能组件，我似乎有一个琐碎的问题。基本上，我有一个容器组件，该组件在用户单击按钮时触发的状态更改后呈现一个Modal组件。模态是一个无状态的功能组件，其中包含一些输入字段，这些输入字段需要连接到容器组件内部的功能。

I have a seemingly trivial question about props and functional components. Basically, I have a container component which renders a Modal component upon state change which is triggered by user click on a button. The modal is a stateless functional component that houses some input fields which need to connect to functions living inside the container component.

我的问题：当用户与无状态Modal组件内的表单字段进行交互时，如何使用父组件内的函数来更改状态？我是否错误地传递了道具？预先感谢。

My question: How can I use the functions living inside the parent component to change state while the user is interacting with form fields inside the stateless Modal component? Am I passing down props incorrectly? Thanks in advance.

容器

export default class LookupForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showModal: false
        };
    }
    render() {
        let close = () => this.setState({ showModal: false });

        return (
            ... // other JSX syntax
            <CreateProfile fields={this.props} show={this.state.showModal} onHide={close} />
        );
    }

    firstNameChange(e) {
      Actions.firstNameChange(e.target.value);
    }
};

功能（模态）组件

const CreateProfile = ({ fields }) => {
  console.log(fields);
  return (
      ... // other JSX syntax

      <Modal.Body>
        <Panel>
          <div className="entry-form">
            <FormGroup>
              <ControlLabel>First Name</ControlLabel>
              <FormControl type="text"
                onChange={fields.firstNameChange} placeholder="Jane"
                />
            </FormGroup>
  );
};

示例：说我想呼叫 this.firstNameChange 在Modal组件中。我猜想将道具传递给功能组件的破坏性语法让我有些困惑。即：

Example: say I want to call this.firstNameChange from within the Modal component. I guess the "destructuring" syntax of passing props to a functional component has got me a bit confused. i.e:

const SomeComponent =（{someProps}）=> {// ...};

推荐答案

您需要分别传递每个道具您需要调用的每个函数

You would need to pass down each prop individually for each function that you needed to call

<CreateProfile
  onFirstNameChange={this.firstNameChange} 
  onHide={close}
  show={this.state.showModal}
/>

然后在CreateProfile组件中可以执行

and then in the CreateProfile component you can either do

const CreateProfile = ({onFirstNameChange, onHide, show }) => {...}

进行解构后，会将匹配的属性名称/值分配给传入的变量。名称只需与属性相匹配

with destructuring it will assign the matching property names/values to the passed in variables. The names just have to match with the properties

，或者只需

const CreateProfile = (props) => {...}

，然后在每个地方调用 props.onHide 或您尝试访问的任何道具。

and in each place call props.onHide or whatever prop you are trying to access.

这篇关于反应：将道具传递给功能组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！