Link 声明 ReactJS 的道具

Question

我正在使用 reactjs 和 Redux 将数据从一个页面传输到另一个页面，在第一页我正在发送一个动作来保存值，这很好用

在第二页，我有一个组件使用这个保存的值所以 this.props.values 给我准确的值但是在这个组件中我必须在渲染部分使用 this.state.values

有没有办法在我的第二页 link this.props.values 到我的 this.state.values ？

Answer 1

Is there a way to link this.props.values to my this.state.values in my second page ?

如果这就是您想要的，将 props 放入 state 的最佳方法是在 constructor

class Component extends React.Componet {
  constructor(props) {
    super(props)

    this.state = { values: props.values || [] } // [] or some default value
  }
}

只需确保使用 componentWillReceiveProps

处理 props 值发生变化的情况

componentWillReceiveProps (nextProps) {
  if (!equals(this.props.values, nextProps.values)) {
    this.setState({ values: nextProps.values })
  }
}

equals 是您想要的任何内容（==、lodash#deepEquals 等）

Answer 2

您可以像这样使用 class，或者如果您以函数风格编写，将 props 作为参数传递并简单地调用 return 作为 {props.values}

import React, {Component} from 'react';

    class testSample extends Component {
              constructor(props) {
                super(props)
                 console.log(props.value); //check whether you are receiving values in browser console
                this.state = { values: props.values }
              }

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

              )
            }

     }

export default testSample

或者您可以像这样直接访问它们，而不是再次分配给状态。

import React, {Component} from 'react';

 class testSample extends Component {
      constructor(props) {
        super(props)
         console.log(props.value); //check whether you are receiving values in browser console

      }

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

      )
    }

export default testSample

Link 声明 ReactJS 的道具

Link Props to State ReactJS

reducers

reactjs

redux

react-props

react-state-management