Question

我正在创建React.js Weather项目。目前正在研究将摄氏度转换为华氏度的拨动开关。摄氏计数在一个组件中创建，而切换按钮在另一个组件中创建。单击切换按钮时，它必须触发计数并显示它。当两个都在一个组件中创建时，它工作正常，但是，我想从另一个组件触发该函数。我该怎么办？下面是供参考的代码

CelToFahr.js（在此处显示计数）

import React, { Component } from 'react'
import CountUp from 'react-countup';

class CeltoFahr extends Component {
    state = {
        celOn: true
    }

    render() {
        return (
            <React.Fragment>
                {/* Code for celcius to farenheit */}
                <div className="weather">
            <div className="figures">
            <div className="figuresWrap2">
                <div className="mainFigureWrap">
                    <CountUp
                        start={!this.state.celOn ? this.props.temp.cel : this.props.temp.fahr}
                        end={this.state.celOn ? this.props.temp.cel : this.props.temp.fahr}
                        duration={2}
                        >
                        {({ countUpRef, start}) => (
                            <h1 ref={countUpRef}></h1>
                        )}
                    </CountUp>    
                </div>
                </div>
                </div>
                </div>
                {/*End of Code for celcius to farenheit */}
            </React.Fragment>
        )
    }
}

export default CeltoFahr

CelToFahrBtn（在此处创建切换按钮）

import React, { Component } from 'react'
import CelToFahr from './CeltoFahr'

class CelToFahrBtn extends Component {
    state = {
        celOn: true
    }

    switchCel = () => {
        this.setState({ celOn: !this.state.celOn })
    }

    render = (props) => {
        return ( 
            <div className="button" style={{display: 'inline-block'}}>
            <div className="weather">
            <div className="figures">
            <div className="figuresWrap2">
            <div className="mainFigureWrap">
                <div onClick={this.switchCel} className="CelSwitchWrap">
                    <div className={"CelSwitch" + (this.state.celOn ? "" : " transition")}>
                        <h3>C°</h3>
                        <h3>F°</h3>
                    </div>
                </div>
            </div>
            </div>
            </div>
            </div>
            </div> 
        )
    }
}

export default CelToFahrBtn

在这里，当我单击switchCel时，必须将摄氏度触发到华氏温度，反之亦然。怎么做？任何建议高度赞赏。预先感谢

Answer 1

我会让celToFahr作为celToFahrBtn的父组件，然后通过props传递要调用的函数

<CellToFahrBtn callback={yourfunction}/>

您还能做些什么，让这些组件有一个共同的父代，您将通过props和callbacks再次执行

第三个选项将具有一个全局状态，该状态将带有Redux之类的功能或Reacts自己的Context。再一次，您将通过道具获得所需的功能，并且可以随时执行它。如果您的组件在用户界面和源代码中完全分开，这是最好的选择，但我认为在这种情况下不是这种情况。

https://reactjs.org/docs/context.html

这些几乎是您拥有的所有选择

Answer 2

要实现此目的，您需要提升状态，然后将状态和处理程序作为道具传递给所需的组件。

CeltoFahr和CelToFahrBtn随后将成为无状态组件，并依赖于从TemperatureController传递来的道具

class TemperatureController extends Component {
    state = {
        celOn: true
    }

    switchCel = () => {
        this.setState({ celOn: !this.state.celOn })
    }


    render () {
       return (
         <React.Fragment>
            <CeltoFahr celOn={this.state.celOn} switchCel={this.state.switchCel} />
            <CelToFahrBtn celOn={this.state.celOn} switchCel={this.state.switchCel}/>
         </React.Fragment>
       )
    }
}

在React Docs https://reactjs.org/docs/lifting-state-up.html

上可能有更好的解释

Answer 3

请参阅以下更简化的示例：

import React, {useState} from 'react';

const Display = ({}) => {
    const [count, setCount] = useState(0);


    return <div>
        <span>{count}</span>
        <Button countUp={() => setCount(count +1)}></Button>
    </div>
}

const Button = ({countUp}) => {
    return <button>Count up</button>
}

总是可以从父组件中传递函数。有关更多信息，请参见Extracting Components。

“ Thinking in React”指南中对此也做了很好的描述。具体是Part 4和Part 5。

Answer 4

在React中，您应该始终尝试使组件尽可能地哑。我总是从功能组件而不是类组件开始（请阅读here，为什么要这样做）。

因此，我将按钮变成一个功能：

Data1<-Data1 %>%
group_by(Group) %>%
mutate(Rd1 = ifelse(Vol==0, 0, (Data1$OI/Data1$CumVol)))


Data1<-Data1 %>%
group_by(Group) %>%
mutate(Rd = ifelse(Vol==0, lag(Rd1), 
(Data1$OI/Data1$CumVol)))

您应该将逻辑放在父组件中

import React from 'react';
import CelToFahr from './CeltoFahr';

function CelToFahrBtn(props) {
  return (
    <div className="button" style={{ display: 'inline-block' }}>
      <div className="weather">
        <div className="figures">
          <div className="figuresWrap2">
            <div className="mainFigureWrap">
              <div onClick={() => props.switchCel()} className="CelSwitchWrap">
                <div
                  className={'CelSwitch' + (props.celOn ? '' : ' transition')}
                >
                  <h3>C°</h3>
                  <h3>F°</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CelToFahrBtn;

如何在React.js中将功能从一个组件触发到另一个组件？

4 个答案: