javascript - 从不同的父组件传递 Prop

Question

我有多个父组件，所有形式，它是一个检查生成器。你输入你的信息，然后他们打印你的支票。子组件是支票布局，所有数据都来自表单。

这是我的第一个父组件 - BusinessAddress

import React from 'react';
import './../App.css';
import Check from './Check';

class BusinessAddress extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: {
      name: 'BusinessAddress',
      a: '',
      b: '',
      c: '',
      d:  '',
      e: '',
      f: '',
      g: '',
      h: ''
    }};

  }

  handleChange(property, event) {
    console.log(event.target.value);
    const text = {...this.state.text};
    text[property] = event.target.value;
    this.setState({text: text});
  }

  handleSubmit(event) {
    console.log(this.state.text.e);
  }

  render() {

    return (
      <div>
      <div className="form-box">
        <h3>Business Address</h3>
        <label>Business Name</label>
        <input type="text" placeholder="Business Name" value={this.state.text.a} onChange={this.handleChange.bind(this, 'a')} maxLength="30" />
        <label>Name Line 2</label>
        <input type="text" placeholder="Business Name Line 2" value={this.state.text.b} onChange={this.handleChange.bind(this, 'b')} maxLength="90" />
        <label>Street Address</label>
        <input type="text" placeholder="Street Address" value={this.state.text.c} onChange={this.handleChange.bind(this, 'c')} maxLength="30" />
        <label>Address Line 2</label>
        <input type="text" placeholder="Street Address Line 2" value={this.state.text.d} onChange={this.handleChange.bind(this, 'd')} maxLength="30" />
        <label>City</label>
        <input type="text" className="short" placeholder="City" value={this.state.text.e} onChange={this.handleChange.bind(this, 'e')} maxLength="30" />
        <label>State</label>
        <input type="text" className="short" placeholder="State" value={this.state.text.f} onChange={this.handleChange.bind(this, 'f')} maxLength="30" />
        <label>Postal</label>
        <input type="text" className="short" placeholder="Postal" value={this.state.text.g} onChange={this.handleChange.bind(this, 'g')} maxLength="30" />
        <label>Phone (optional)</label>
        <input type="text" className="short" placeholder="Phone" value={this.state.text.h} onChange={this.handleChange.bind(this, 'h')} maxLength="30" />
    </div>

    <Check data={this.state.text} />

      </div>
    )
  }

}

export default BusinessAddress;

这是我的子组件

import React from 'react';
import './../App.css';
import BusinessAddress from './BusinessAddress';

export class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}

  }
  render() {
    const newObject = this.props.data;
    const data = Object.values(newObject);

    if(data[0] == "BusinessAddress") {
    }

    return (
      <div>

        {data.map((data) => <li>{data}</li>)}

        <div id="Address"></div>
        <div id="Bank-Info"></div>

      </div>
    )
  }
}



export default Check;

在子组件中，我希望能够找出数据来自哪个组件，以及根据它的父组件将其放置在 DOM 中的什么位置。

您可以在我的父组件 BusinessAddress 中看到，我已将组件名称添加到状态以传递给子组件。我只是不确定如何处理 IF 语句，或者我是否以正确的方式传递数据。

如有任何帮助，我们将不胜感激!

Answer 1

您可以将父函数作为 props 渲染给子函数，然后可以检查组件名称是否与父函数完全相同，请注意在处理 map 函数时应放置 key 属性。这是比引用数组索引更好的做法。这是解决方案。

在父组件中

class BusinessAddress extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'BusinessAddress',
      text:{ a: '',
             b: '',
             c: '',
             d: '',
             e: '',
             f: '',
             g: '',
             h: ''
      }
    };
  }
  handleComponentName = name => {
    return this.state.name === name;
  }

  ....

  <Check data={this.state.text} handleParent={this.handleComponentName}/>

在子组件中

export class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}

  }

  render() {
    const data = Object.values(this.props.data);
    const result = (this.props.handleParent("BusinessAddress"), null)
    if (result) {
        // do something here
    }
    return (
      <div>

        {data.map((item, index) => <li key={index}>{item}</li>)}

        <div id="Address"></div>
        <div id="Bank-Info"></div>

      </div>
    )
  }
}