Question

我有一个reactjs rendermethod，我试图通过一个函数设置一个变量，它看起来像这样（你猜对了，不行）：

render() {
        let myVariable=''

        //this function changes/sets myVariable
        this.changeMyVariable()

        return (
            <div>{myVariable}</div>
        );
}

如何通过另一个函数设置渲染中使用的变量，如上例所示。我也尝试使用statevariable，但changeVariable函数运行两次。

Answer 1

render() {
    // assuming 'changeMyVariable' returns a value
    const myVariable = this.changeMyVariable();

    return (
        <div>{myVariable}</div>
    );
}

实际上你可以调用JSX本身的函数：

<div>{this.changeMyVariable()}</div>。

注意：如果this.changeMyVariable()的输出永远不会根据新道具发生变化，最好计算render之外的值（避免重新计算组件重新计算时）呈现）。

Answer 2

虽然您可以在渲染中设置局部变量，但建议使用props以获得更好的可修改性。

因此，您首先在组件中“声明”该属性：

class ExampleComponent extends React.Component {
    static propTypes = {
        myVariable: React.PropTypes.string.isRequired,
    };    
    static defaultProps = {
        myVariable: 'Default Value'
    };

然后，您使用prop呈现方法呈现此ExampleComponent：

render() {
    return (
        <div>{this.props.myVariable}</div>
    );
}

在呈现prop时使用此ExampleComponent：

render() {
    <ExampleComponent myVariable='example'/>
}

如何使用reactjs在渲染中设置变量？

2 个答案: