React - 从类到钩子的状态

Question

我不明白什么。

从我的父母类，我给我的孩子类这样的状态：

<TrainingArea
   getHtmlGrain={() => this.getHtmlGrain()}
   right={this.state.right}
   grain_language={this.state.lang}
   id_grain={this.state.grain[this.state.currentGrain]}
   skinPath={this.state.training.skin_path}
   selectedBlock={this.state.selectedBlock}
 />

在拿下儿童班的“道具”之前，我使用了这个：

this.props.skinPath

但是现在，我不明白如何在“钩子类反应”中使用这些道具。 还是不可能？ 我的父类看起来像这样：

import TrainingArea from '../Blocks/General/TrainingArea'

class BlockPage extends Component {

state = {
//some state
}

 render() {
   return (
      <TrainingArea
       getHtmlGrain={() => this.getHtmlGrain()}
       right={this.state.right}
       grain_language={this.state.lang}
       id_grain={this.state.grain[this.state.currentGrain]}
       skinPath={this.state.training.skin_path}
       selectedBlock={this.state.selectedBlock}
     />
   )}

我如何在我的孩子班上使用它：

const TrainingArea = (props) => {
    console.log(props.skinPath)
    return (
       <h1>hi</h1>
    )
}

useEffect(()=> {
    TrainingArea()
})

有人能帮我吗？ 多谢

Answer 1

你基本上从这个出发：

class MyComponent extends React.Component {
    render() {
        const prop = this.props.prop;
        const someState = this.state.someState;
        // ...
        return <button onClick={() => this.setState({ someState: 'state' })}>Example</button>;
    };
}

对此：

function MyComponent(props) {
    const prop = props.prop;
    const [someState, setSomeState] = React.useState();
    // ...
    return <button onClick={() => setSomeState('state')}>Example</button>;
}

Answer 2

我用这样的东西来拿道具

const skin= (props) => {
    const [skin, setskin] = useState([...props.skinPath])
}

Answer 3

对的，这是可能的。 在您的功能组件中，您可以访问提供的道具作为函数参数。 例如，您可以执行以下操作：

const FunctionalComponent = (props) => {
  console.log(props.skinPath)
}

Answer 4

假设你有一个这样的父类

class Parent extends React.COmponent {
  constructor(props) {
    super(props)
    this.state = {
      // some state data
    }
  }
  render() {
    return(
      <TrainingArea
        getHtmlGrain={() => this.getHtmlGrain()}
        right={this.state.right}
        grain_language={this.state.lang}
        id_grain={this.state.grain[this.state.currentGrain]}
        skinPath={this.state.training.skin_path}
        selectedBlock={this.state.selectedBlock}
      />
    );
  }
}

并且在子组件中，您需要使用此道具从道具中获取一些数据

const TrainingArea = (props) => {
   console.log(props.skinPath)
   return (
     // render JSX 
   )
}