Question

我有一些json配置，用于在调查应用程序中定义一些元数据。我注意到了一些奇怪的行为，但是我是React的新手，所以我可能会遗漏一些明显的东西。

我有一些这样的代码：

const config = require('../../config.json');

/**
  * The input group determines the inputs required from the given frame from the config and renders them.
  */
export class InputGroup extends Component {
       constructor(props){
           super(props);
           this.inputsConfig = config.path[this.props.path].step[this.props.step].inputs;
       }

       componentWillReceiveProps(props){
           console.log(props)
       }

      render() {
        console.log(this.inputsConfig)

它可以从其父组件正确获取其道具，但是，inputsConfig的值不会更改以反映新的道具。我想念什么？

谢谢！

Answer 1

这可能是由于多种因素引起的，例如配置文件中数据的格式等。

通过以下方式修改组件的实现，也许您可以采用一种更实用的方法来访问组件中的外部配置：

const config = require('../../config.json');

export class InputGroup extends Component {

   /*
   Define a local method in your component to extract the 
   configuration, if required props have been supplied and are 
   available on this InputGroup component 
   */
   getInputConfig() {

     const { path, step } = this.props

     // If path and step props have been provided, then retrieve 
     // configuration from config accordingly
     if(path && step) {
        return config.path[path].step[step].inputs;
     }
     else {
        return {}
     }
   }

  render() {
    // Get the configuration for this component by calling the
    // method defined above
    console.log(this.getInputConfig())

    // Return components view 
    return (<div> 
        <p>Your component configuration:</p>
        <p>{{ JSON.stringify(this.getInputConfig()) }}</p> 
    </div>)
  }
}

此外，请务必记住在渲染方法中返回一些JSX / markup，以防万一您忘了这么做。

反应，无法正确使用我的配置

1 个答案: