Как отправить реквизит из компонента класса в функциональный компонент?

Question

Я новичок в reactjs. нужно знать, как отправлять значения реквизита на одной странице на другую. Реквизит на первой странице. Я могу получить значение компонента класса, как получить значения на другой странице. Заранее спасибо

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)}  />
  );
  }
}

Другая страница - wall-factory-3d. js

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

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

Я пробовал это, но не получил вывод.

Answer 1

мнение, но это я бы сделал это ...:)

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 }} />
}

и в вашем компоненте ...

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>
 )
}

Answer 2

На самом деле ваш дочерний компонент будет смонтирован, как только ваш текущий компонент будет визуализирован. Поэтому любое значение после render не повлияет на ранее отображенный дочерний компонент.

this.state = {
    backgroundColor: 'aqua';
}

Таким образом, <WallFactory background={this.state.background}/> будет содержать aqua.

Если вам нужно передать другой фон ребенку, передайте ему функцию, такую ​​как

<WallFactory getBackgroundColor={this.passbackgroundColor}/>

passbackgroundColor() {
    return this.state.backgroundColor
}

в компоненте child

const backgroundColor = props.getBackgroundColor();

, если вам действительно нужно, чтобы это было динамически c.

Answer 3

Вы можете использовать React Hooks или любую другую библиотеку управления состояниями, например Redux , MobX et c.
В React, если есть нет непосредственной связи (parent-children) между двумя компонентами, вы можете соединить эти два с глобальным состоянием.
Глобальное состояние в простых словах - это объект, к которому могут обращаться многие компоненты с помощью соединителей или Flux техника.