javascript React：向功能组件传递属性

3j86kqsm 于 2022-12-21 发布在 Java

关注(0)|答案(5)|浏览(155)

我有一个关于 prop 和函数组件的看似微不足道的问题。基本上，我有一个容器组件，它在用户点击按钮触发状态改变时呈现一个模态组件。模态是一个无状态的函数组件，其中包含一些需要连接到容器组件内部函数的输入字段。
我的问题：当用户与无状态Modal组件中的表单字段交互时，我如何使用父组件中的函数来更改状态？我是否错误地传递了属性？

- 集装箱**

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

例如：假设我想从Modal组件中调用this.firstNameChange，我猜传递props到function组件的"解构"语法让我有点困惑，即：
const SomeComponent = ({ someProps }) = > { // ... };

JavaScript

来源：https://stackoverflow.com/questions/39963565/react-passing-props-to-function-components

5条答案

按热度按时间

ao218c7q1#

您需要为需要调用的每个函数单独传递每个prop

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

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

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

通过反结构化，它会将匹配的属性名称/值赋给传入的变量。名称必须与属性匹配
还是直接去做

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

在每个地方调用props.onHide或任何你试图访问的 prop 。

赞(0）回复(0）举报 2022-12-21

bxfogqkk2#

我使用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>  
    );
}

赞(0）回复(0）举报 2022-12-21

vltsax253#

补充上述答案。

如果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
}) => {...}

赞(0）回复(0）举报 2022-12-21

0yg35tkg4#

仅在源组件上执行此操作

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

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

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

赞(0）回复(0）举报 2022-12-21

of1yzvn45#

finalfreq's answer的变体
你可以单独传递一些 prop ，如果你真的想要的话，可以传递所有的父 prop （不推荐，但有时很方便）

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

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

const CreateProfile = (props) => {

并逐个摧毁 prop

const {onFirstNameChange, onHide, show }=props;

赞(0）回复(0）举报 2022-12-21

我来回答

javascript React：向功能组件传递属性

5条答案

相关问题

热门标签

最新问答