如何从ComponentWillMount返回值，然后在渲染方法中使用这些值？

Question

我可以使用在ComponenetWillMount中设置的渲染变量吗？这是代码，但无法正常工作，它向我显示所有变量都是未定义的。我知道这是错误的，但是我可以使用的最干净的解决方案是什么？

class ItemBoard extends Component {

    componentWillMount(){
        if (this.props.type == "expense"){
            type = "expenses"
            percentage = this.props.percentage
            amount     = `-${this.props.amount}`
        }
        else{
            type = "income"
            percentage = ' '
            amount     = `+${this.props.amount}`
        }
        return [type,amount,percentage]
    }
    render(){
        var type,percentage,amount;
        return (
            <div className={`budget__${type} clearfix`}>
                <div className={`budget__${type}--text`}>{type}</div>
                <div className={`right ${type === "expense" ? `clearfix` : ``}`}>
                    <div className={`budget__${type}--value`}>{amount}</div>
                    {type === "expenses" ? <div className={`budget__expenses--percentage`}>{percentage}</div> : ""}
                </div>
            </div>
        )
    }
}

Answer 1

您需要在包含componentWillMount（）和render（）的范围内声明这些变量

但是componentWillMount（）不安全，在React 17中将无法使用。

您应该改用componentDidMount()。 https://reactjs.org/docs/react-component.html#componentdidmount