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

您可以将父项的功能作为对孩子的道具，然后可以检查组件名称是否与父项的名称完全相同，请注意，在处理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>
    )
  }
}

Answer 2

您可以循环使用键，而不是循环值，这将允许您使用key作为字段名称，然后可以使用该键获取值，例如：

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

return (
  <div>
    {
      data.map(key => {
        if(key === 'b') {
          return <div>  Business Name Line 2: {data[key]} </div>
        } else if(key === 'c') {
          return <div> Street Address: {data[key]} </div>
        }
      }) 
    }
  </div>
)
}

从不同的父组件传递道具

2 个答案: