Javascript React：将 props 传递给功能组件

React: Passing down props to functional components

提问by Jose

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.

我有一个关于 props 和功能组件的看似微不足道的问题。基本上，我有一个容器组件，它在用户单击按钮触发的状态更改时呈现一个 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.

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

Container

容器

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);
    }
};

Functional (Modal) Component

功能（模态）组件

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>
  );
};

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

示例：假设我想this.firstNameChange从 Modal 组件内部调用。我想将道具传递给功能组件的“解构”语法让我有点困惑。IE：

const SomeComponent = ({ someProps }) = > { // ... };

const SomeComponent = ({ someProps }) = > { // ... };

回答by finalfreq

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}
/>

and then in the CreateProfile component you can either do

然后在 CreateProfile 组件中，您可以执行

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

通过解构，它将匹配的属性名称/值分配给传入的变量。名称只需与属性匹配

or just do

或者只是做

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

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

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

回答by MwamiTovi

An addition to the above answer.

对上述答案的补充。

If Reactcomplains about any of your passed propsbeing undefined, then you will need to destructure those props with defaultvalues (common if passing functions, arrays or object literals) e.g.

如果React抱怨你传递的任何props东西undefined，那么你需要用default值来解构这些道具（如果传递函数、数组或对象文字是常见的），例如

const CreateProfile = ({
  // defined as a default function
  onFirstNameChange = f => f,
  onHide,
  // set default as `false` since it's the passed value
  show = false
}) => {...}

回答by Shreekanth

I'm using react function component
In parent component first pass the propslike below shown

我正在使用反应功能组件
在父组件中首先传递如下所示的道具

import React, { useState } from 'react';
import './App.css';
import Todo from './components/Todo'



function App() {
    const [todos, setTodos] = useState([
        {
          id: 1,
          title: 'This is first list'
        },
        {
          id: 2,
          title: 'This is second list'
        },
        {
          id: 3,
          title: 'This is third list'
        },
    ]);

return (
        <div className="App">
            <h1></h1>
            <Todo todos={todos}/> //This is how i'm passing props in parent component
        </div>
    );
}

export default App;

Then use the propsin child component like below shown

然后在子组件中使用道具，如下所示

function Todo(props) {
    return (
        <div>
            {props.todos.map(todo => { // using props in child component and looping
                return (
                    <h1>{todo.title}</h1>
                )
            })}
        </div>  
    );
}

回答by Krishna Kumar Jangid

just do this on source component

只需在源组件上执行此操作

 <MyDocument selectedQuestionData = {this.state.selectedQuestionAnswer} />

then do this on destination component

然后在目标组件上执行此操作

const MyDocument = (props) => (
  console.log(props.selectedQuestionData)
);