在子组件中访问父组件的状态？

Question

我是 React js 的新手，我需要获取组件的状态以供另一个组件访问 class，我遇到这个问题是因为我使用的是原子设计，因为将所有内容都写在一个组件中正在变成一个问题，这是我的代码： 头部组件:

class Headcomponent extends React.Component{

  constructor (props) {

    super(props);
    this.state = {
      email: '',
      password: '',
      formErrors: {email: '', password: ''},
      emailValid: false,
      passwordValid: false,
      formValid: false,
      items: [],

    }
  }


    this.setState({formErrors: fieldValidationErrors,
                    emailValid: emailValid,
                    passwordValid: passwordValid
                  }, this.validateForm);
}

validateForm() {
  this.setState({formValid: this.state.emailValid && 
  this.state.passwordValid});
}


render(){
        return (
  <Form fields={this.props.form} buttonText="Submit" />
        );
    }
}


Headcomponent.propTypes = {
  form: PropTypes.array,
};

Headcomponent.defaultProps = {
  form: [
    {
      label: 'label1',
      placeholder: 'Input 1',
    },
    {
      label: 'label2',
      placeholder: 'Placeholder for Input 2',
    },
  ],
};

export default Headcomponent;

form.js

   const Form = props => (
      <form className="Form">
        {
          props.fields.map((field, i) => (<LabeledInput label={field.label} placeholder={field.placeholder} key={i}/>))
        }
        <Button text={props.buttonText} />
      </form>
    );

    Form.propTypes = {
      fields: PropTypes.arrayOf(PropTypes.object).isRequired,
      buttonText: PropTypes.string.isRequired,
    };

    export default Form;

LabeledInput.js（我需要传递我的密码状态）

const LabeledInput = props => (
  <div className={`form-group `} >
    <Label text={props.label} />
    <Input value={props.value} placeholder={props.placeholder} type="text" onChange={props.onChange} />
    <div class="valid-feedback">{props.errorMessage}</div>
    <small class="form-text text-muted">{props.exampleText}</small>
  </div>
);

LabeledInput.propTypes = {
  label: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  onChange: PropTypes.func.required,
  value: PropTypes.string.isRequired,
  exampleText: PropTypes.string,
  errorMessage: PropTypes.string,
};

export default LabeledInput;

如何在 LabeledInput 中访问 headComponent 的状态？

Answer 1

export default headComponent 然后 import 它里面 LabelledInout

这是头部组件

export default class Headcomponent extends React.Component{ 
  ...
}

LabelledInput 组件

 import Headcomponet from './headComponent.js'

 const LabelledInput = (props) => {
    return(<Headcomponent />);
 }

Answer 2

您可以使用 props 来实现。

根组件：

<div>
  <child myState="hello"></child>
</div>

子组件：

<div>
  <child2 myOtherProperty={this.props.myState}></child2>
</div>

子 1 组件：

<div>{this.props.myOtherProperty}</div>

您还可以将函数作为属性传递给其他组件，并让它们在需要时回调根组件，如下所示：

<div>
  <child onChange={this.myOnChangeMethodDefinedInRootComponent.bind(this)}></child>
</div>

如果不使用 Redux

子项内部发生某些变化，您可以通过这种方式 "tell" 根组件

希望这对您有所帮助

Answer 3

这是您正在查看的内容的快速原型，

将状态从头组件作为道具一直传递到标签组件。标签组件的变化会修改头部组件的状态并强制重新渲染所有组件。

// Head Component
class HeadCompoent {
  constructor() {
    this.state = {
      password: '',
      userName: '',
    }
  }

  handleFieldChange = (key, val) => {
    this.setState({
      [key]: val,
    });
  };

  render() {
    <Form
      fields={[{
        item: {
          value: this.state.password,
          type: 'password',
          key: 'password'
        },
      }, {
        item: {
          value: this.state.userName,
          type: 'text',
          key: 'userName'
        }
      }]}
      handleFieldChange={this.handleFieldChange} 
    />
  }
}

// Form Component
const Form = (fields) => (
  <div>
    {
      fields.map(p => <Label {...p} />)
    }
  </div>);


// Label Component
const Label = ({ type, value, key, handleFieldChange }) => {
  const handleChange = (key) => (e) => {
    handleFieldChange(key, e.target.value);
  };

  return (
    <input type={type} value={value} key={key} onChange={handleChange(key)} />
  );
};

Answer 4

最合理的方式是将它（你需要的Headcomponent状态的值）作为道具传递下去：

Headcomponent.js

class Headcomponent extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      email: '',
      password: '',
      formErrors: {email: '', password: ''},
      emailValid: false,
      passwordValid: false,
      formValid: false,
      items: [],
    }
  }

  render() {
    return (
      <Form
        fields={this.props.form}
        formValid={this.state.formValid}  // from Headcomponent's state
        buttonText="Submit"
      />
    );
  }
}

Form.js

const Form = props => (
   <form className="Form">
     {
       props.fields.map((field, i) => (
         <LabeledInput
           label={field.label}
           formValid={props.formValid}  // from Headcomponent's state
           placeholder={field.placeholder}
           key={i}
         />
       ))
     }
     <Button text={props.buttonText} />
   </form>
 );

LabeledInput.js

 const LabeledInput = props => (
   <div className={`form-group `} >
     { props.formValid && 'This form is valid' }  // from Headcomponent's state
     <Label text={props.label} />
     <Input value={props.value} placeholder={props.placeholder} type="text" onChange={props.onChange} />
     <div class="valid-feedback">{props.errorMessage}</div>
     <small class="form-text text-muted">{props.exampleText}</small>
   </div>
 );

因此，如果任何时候 Headcomponent 的状态更新，它将传播到 LabeledInput 组件

Answer 5

在 LabeledInput 中访问 headComponent 的状态以继续传递下去的最简单方法。

如果你想从 LabeledInput 中的 headComponent 访问值 this.state.password 那么你将这个 this.state.password 作为 prop 传递给渲染方法中的表单组件

   render(){
        return (
          <Form 
            fields={this.props.form} 
            buttonText="Submit" 
            password={this.state.password} />
        );
    }

这样您就可以访问 this.state.password 作为 Form 组件内的道具。然后重复该过程并将其传递给 form

内的 LabeledInput 组件

const Form = props => (
      <form className="Form">
        {
          props.fields.map((field, i) => (
            <LabeledInput 
                label={field.label} 
                placeholder={field.placeholder} 
                key={i}
                password={this.props.password}
             />))
        }
        <Button text={props.buttonText} />
      </form>
    );

然后您可以通过调用 this.props.password.

访问 LabeledInput 组件中的值

在子组件中访问父组件的状态？

Access state of parent component in a child component?

javascript

reactjs

ecmascript-6

state

react-props