如何在不渲染组件的情况下传递道具？

Question

我有两个组件，一个叫ReturningCustomer，另一个叫Update。我有一个电话号码保存在ReturningCustomer中，并且我想将该电话号码传递给Update组件，而必须呈现Update或使用Redux：

render() {
       return (
        <div className="row returning-customer">
            <h3>Returning Customer</h3>
            <div className="col">
                <p className="error">{this.state.error}</p>
                <form className="row" onSubmit={this.onSubmit}>
                    <label>Phone Number</label>
                    <input 
                        type="text"
                        className="validate"
                        onChange={this.onPhoneNumberChange}
                    />
                    <button className="btn">Go</button>
                </form>
            </div>
            <Update 
                phoneNumber={this.state.phoneNumber} 
            />
        </div>
    );

}

Answer 1

根据当前的描述，尚不完全清楚您要问什么，但听起来您要么想在传递道具时有条件地渲染组件，要么想知道如何使用这些道具？我将两者都包含在这里。

有条件地渲染组件并传递 props：

// SomeComponent.js

import React from 'react'
import Update from '../..'

class SomeComponent extends React.Component {
  state = { phoneNumber: '' };

  renderUpdate() {
    const someCondition = true;

    if (someCondition) {
      return <Update phoneNumber={this.state.phoneNumber} />
    }

    return null
  }

  render() {
    return (
      <div>
        {this.renderUpdate()}
      </div>
    )
  }
}

export default SomeComponent

使用道具：

// Update.js

import React from 'react'

// destructuring the props object here
const Update = ({ phoneNumber }) => (
   <div>
     <p>{phoneNumber}</p>
   </div>
)

export default Update