如何将类组件中的道具发送到功能组件? [英] How to send props in class component to functional component?

问题描述

我是 reactjs 的初学者.需要知道如何将一页中的道具值发送到另一页.道具在第一页我可以获取类组件值如何获取另一个页面中的值.提前致谢

wallcolor.jsx

import React, { Component } from "react";从反应颜色"导入 { SketchPicker };从../../wall-factory-3d"导入 WallFactory；导出默认类 WallColor 扩展组件 {构造函数(道具){超级(道具)；this.state = {背景:'#d3d3d3'，};}handleChangeComplete(e){this.setState({ 背景:e.hex },()=>{return });};使成为() {返回 (<SketchPicker color={ this.state.background } onChangeComplete={(e)=>this.handleChangeComplete(e)}/>);}}

另一个页面是 wall-factory-3d.js

import { handleChangeComplete } from "../../components/toolbar/wallcolor";import * as SharedStyle from '../../shared-style';函数get_color(道具){console.log(props.background);}

我试过了，但没有得到输出.

解决方案

意见，但这是我会做的... :)

this.state = {背景颜色'，pickWall: 假,}const handleChangeComplete = (e) =>{this.setState(prevState => ({...prevState,PickWall:真实，背景:e.target.value，}))}使成为() {const { x, y } = this.propsconst { 背景，pickWall } = this.stateconst { handleChangeComplete } = 这个return <SketchPicker {...{ x, y, background, handleChangeComplete,pickWall }}/>}

并在您的组件中...

const SketchPicker = ({X，是，背景，选墙，处理更改完成，}) =>{返回 (<div><SomeDiv onClick={(e) =>handleChangeComplete(e)}>...你的代码</SomeDiv><片段>{pickedWall &&<WallPicker {...{ x, y, background }}/>}</片段>

)}

I am beginner to reactjs. need to know how to send the props values in one page to another page. Props are on the first page I can get the class component value how to get the values in another page. Thanks in advance

wallcolor.jsx

import React, { Component } from "react";
import { SketchPicker } from 'react-color';
import WallFactory from "../../wall-factory-3d";
export default class WallColor extends Component {

  constructor(props) {
    super(props);
    this.state = {
        background: '#d3d3d3',
    };
  }

 handleChangeComplete(e){
    this.setState({ background: e.hex },()=>{
        return <WallFactory background={this.state.background}/>
    });
  };

  render() {
    return (
  <SketchPicker color={ this.state.background } onChangeComplete={(e)=>this.handleChangeComplete(e)}  />
  );
  }
}

Another page is wall-factory-3d.js

import  { handleChangeComplete } from "../../components/toolbar/wallcolor";
import * as SharedStyle from '../../shared-style';

 function get_color(props){
   console.log(props.background);
}

I tried this but not get output.

解决方案

opinion, but this is i would've done it... :)

this.state = {
 background: 'color',
 pickedWall: false,
}

const handleChangeComplete = (e) => {
 this.setState(prevState => ({
  ...prevState,
  pickedWall: true,
  background: e.target.value,
 }))
}

render() {
 const { x, y } = this.props     
 const { background, pickedWall } = this.state
 const { handleChangeComplete } = this

 return <SketchPicker {...{ x, y, background, handleChangeComplete, pickedWall }} />
}

and in your component...

const SketchPicker = ({
 x,
 y,
 background,
 pickedWall,
 handleChangeComplete,
}) => {
 return (
  <div>
   <SomeDiv onClick={(e) => handleChangeComplete(e)}>
    ...your code
   </SomeDiv>
   <Fragment>
    {pickedWall && <WallPicker {...{ x, y, background }} />}
   </Fragment>
  </div>
 )
}

这篇关于如何将类组件中的道具发送到功能组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！