Question

我是reactjs的初学者。需要知道如何将一个页面中的props值发送到另一页面。道具在第一页上，我可以获取类组件的值，以及如何在另一页上获取值。预先感谢

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

您可以使用React Hooks或任何其他状态管理库，例如Redux，MobX等。
在React中，如果两个组件之间没有直接关系（父子关系），则可以将这两个组件与全局状态连接起来。
简单来说，全局状态是一个对象，许多组件可以使用连接器或Flux技术来访问该对象。

Answer 3

实际上，一旦您的当前组件被渲染，您的子组件就会被挂载。因此，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();

如果您真的需要动态的话。

如何将类组件中的道具发送到功能组件？

3 个答案: