React：将 props 传递给功能组件

IT技术 javascript reactjs components
2021-04-02 17:08:32

我有一个关于 props 和功能组件的看似微不足道的问题。基本上，我有一个容器组件，它在用户单击按钮触发的状态更改时呈现一个 Modal 组件。模态是一个无状态的功能组件，它包含一些需要连接到容器组件内的功能的输入字段。

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

容器

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 组件内部调用。我想将props传递给功能组件的“解构”语法让我有点困惑。IE：

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

5个回答

您需要为需要调用的每个函数分别传递每个props 

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

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

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

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

或者只是做

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

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

这对我来说真的很有帮助@finalfreq 谢谢
2021-05-27 17:08:32
如何export default呢？
2021-06-06 17:08:32
最后写入导出默认的 CreateProfile；
2021-06-19 17:08:32

我正在使用react功能组件
在父组件中首先传递如下所示的props

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;

然后使用子组件中的props，如下所示

function Todo(props) {
    return (
        <div>
            {props.todos.map(todo => { // using props in child component and looping
                return (
                    <h1>{todo.title}</h1>
                )
            })}
        </div>  
    );
}
如果我想将数据从 Todo 传递到 App 怎么办？
2021-05-28 17:08:32
最好通过回调来做到这一点
2021-06-10 17:08:32
是的请回答
2021-06-14 17:08:32

对上述答案的补充。

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

const CreateProfile = ({
  // defined as a default function
  onFirstNameChange = f => f,
  onHide,
  // set default as `false` since it's the passed value
  show = false
}) => {...}
@friendlyfire 你稍后会掌握它的窍门。请记住，很多检查/控制都是为了确保安全。
2021-06-03 17:08:32
即使我知道它被传递了，仍然保持获取 props.func 是未定义的。现在我知道为什么了！泰！这是我讨厌 React 的那种东西。有时需要太多的知识技巧才能让它发挥作用。
2021-06-09 17:08:32

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

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

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

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

finalfreq 答案的变体

如果你真的想要，你可以单独传递一些props和所有的父props（不推荐，但有时方便）

<CreateProfile
  {...this.props}
  show={this.state.showModal}
/>

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

const CreateProfile = (props) => {

并单独销毁props

const {onFirstNameChange, onHide, show }=props;

其它你可能感兴趣的问题
上一篇带有 MUI 的 CSS 伪选择器 下一篇通过react获取 cookie