reactjs - 在反应中将数据从一个组件发送到另一个组件

Question

我已经看到了多个相同的问题，然后是这个问题，但我不明白他们的答案。

我有一个组件可以获取并获取一些数据。我想将此数据与其他信息一起发送给另一个组件（孩子？我不太明白这一点）。

这是我的第一个组件： (login.component.jsx) 我想将 IP、用户名、密码、CPGlist 传递给 CreateVolume 中的组件并在那里使用它。

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            IP: "xxx",
            username: "",
            password: "",
            submitted: false,
            CPGlist: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
.
.
.
    render() {
            const { IP, username, password, CPGlist, submitted } = this.state;
            if (submitted) {
                return (
                    <div>
                         < CreateVolume />
                    </div>
                );
            }

CreateVolume.component.jsx：

class CreateVolume extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            IP: "",
            username: "",
            password: "",
            submitted: false,
            name: "",
            cpg: "",
            size: "",
            unit: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
.
.
.
//some code

我应该能够从 login.component.jsx 获取 IP/用户名/密码/CPGlist 到 CreateVolume.component.jsx

谢谢

标签： reactjs

Answer 1

<CreateVolume />仅当填充状态中的数据时才挂载。

{
    this.state.ip && this.state.ip!="" &&
    <CreateColume
        IP = {this.state.IP}
        ...
    />
}