Question

我有以下React类

class Cards extends React.Component {
  //state 
  //axios-> set new state

  render(){

     const{t} = this.props;

  return(

      // something
      <RenderCards t={t}/>
   )};
  }

还有我的RenderCards：

  let RenderCards = (props) => {

    const {t} = props;
    // do something with t
  }

问题是我也想通过道具传递状态，但是以下方法不起作用：

  <RenderCards t={t} st={st}/> //st is this.state

  let RenderCars = (props,st) =>{

  const {st} = st; // -->is undefined!

  }

我应该如何正确传递状态？谢谢！

Answer 1

作为JSX属性传递的所有内容都将放入无状态组件的props参数中；他们最初来自哪里都无所谓。因此RenderCards的签名将始终为props => JSX.Element：

let RenderCards = (props) => {
    const { t, st } = props;
    // do something with t and st
};

我个人也将在父组件之外删除RenderCards的定义，以避免在每次渲染父组件时不必要地重新定义它。

Answer 2

<RenderCards t={t} st={st}/>在这里状态作为道具传递。它将不能用作第二个函数参数（现已弃用context）：

let RenderCards = (props, st) =>{...}

是：

let RenderCards = (props) =>{
  const {st} = props;
  ...
}

从功能反应中渲染主体

2 个答案: