Question

我有两个组件，一个名为 ReturningCustomer ，另一个名为更新。我在 ReturningCustomer 中保存了州的电话号码，我想将该电话号码传递给更新组件，并且必须呈现更新或使用终极版：

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

根据当前的描述，你并不完全清楚你所问的是什么，但听起来你想要在传递道具的同时有条件地渲染一个组件，或者你想知道如何用那些道具？我在这里包括两个。

有条件地渲染组件并传递道具：

// 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

Answer 2

在Update的渲染功能中，您可以使用以下任一项，并且组件不会渲染

render() { 
   return false; 
}

render() { 
   return null; 
}

render() { 
   return []; 
}

render() { 
   return <></>; 
}

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

2 个答案: