Question

我试图将以下反应条形图调整到我的react / redux项目：http://codepen.io/clindsey/collab/RRZBQm/。大多数代码对我来说都没问题，但是我并不真正理解渲染部分：

setTimeout(() => {
  const data = {'alpha': 82, 'bravo': 20, 'charlie': 68};
  const size = [480, 320];
  const margins = [40, 40, 40, 40];
  ReactDOM.render(
    <BarChart {...{data, margins, size}} />
  , document.getElementById('js-app'));
}, 0);

为什么在这个例子中，＆＃34; const＆＃34;通过BarChart元素在ReactDOM.render函数中传递？

当我对本地项目进行调整时，我的容器中有以下代码：

    const App = () => (

      <div>
        <Component1 />
        <Component2 />
        <BarChart />
      </div>
    );

    export default App;

然后我使用mapStateToProps函数传递const data，const size和const margins，如下所示：

const data = {'alpha': 82, 'bravo': 20, 'charlie': 68};
const size = [480, 320];
const margins = [40, 40, 40, 40];

     function mapStateToProps(state) {
        return {
            data: data,
            size: size,
            margins: margins,
                  };
                };

它工作正常但我并不真正理解我在做什么。不确定这是不是很好的做法，也不确定天堂是否合理。

感谢。

Answer 1

mapStateToProps的整个想法是将您的Redux商店链接到您的（在您的情况下）React Components。通常你会像这样使用它

function mapStateToProps(state){
    return {
        propertyOne: state.myPropertyOne, //state.myPropertyOne comes from your redux store, when you return this object, your component gets this object
        propertyTwo: state.myPropertyTwo
    };
}

您无需将const变量传递给函数即可使用。如果他们在该文件中，您可以直接使用它们。

似乎工作得很好 https://jsfiddle.net/julianljk/qkjkqf6q/

我应该如何使用React / redux在我的render方法中传递数据

1 个答案: